What custom rules are used for css3 animation?-CSS Tutorial-php.cn

What custom rules are used for css3 animation?

青灯夜游

Release： 2021-12-10 13:38:41

Original

2378 people have browsed it

css3 animation uses "@keyframes" to customize rules. "@keyframes" can specify animation rules and define the behavior of a period of CSS animation. The syntax is "@keyframes animation name {keyframes-selector {css-styles;}}".

What custom rules are used for css3 animation?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

@keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations.

@keyframes rules are composed of a set of encapsulated CSS style rules that describe how attribute values change over time.

@keyframes animation-name {keyframes-selector {css-styles;}}

Copy after login

keyframes-selector: Defines the percentage of animation, it is between 0% and 100%. An animation can contain many selectors.

Then, using different CSS animation properties, you can control many different aspects of the animation, including the number of animation iterations, whether to alternate between the start and end values, and the animation Whether it should run or pause. Animations can also delay their start time.

@keyframe rules consist of the keyword "@keyframe", followed by an identifier giving the name of the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curly braces) . The animation is then applied to the element by using the identifier as the value of the animation-name attribute.

Syntax:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Copy after login

Inside the curly braces, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation . This allows us to control intermediate steps in the animation sequence.

For example, a simple animated @keyframe can look like this:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

Copy after login

What custom rules are used for css3 animation?

##'0%', '50%', '100%' are all Keyframe selectors, each selector defines a keyframe rule. The keyframe declaration block of a keyframe rule consists of attributes and values.

The animation above resembles a simple transition effect: the background color changes starting from one value (0%) at the beginning of the animation, reaching a value (50%) in the middle, and reaching another value (100) at the end of the animation %). The "0%", "50%", and "100%" keyframe selectors define the waypoints or percentage points at which you want the animated property to change value. We can also use the selector keywords from, to instead of using 0% and 100% respectively, they are equivalent.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

Copy after login

The keyframe selector consists of one or more comma-separated percentage values or the from and to keywords. Note that the percent unit specifier must be used for percent values. Therefore, '0' is an invalid keyframe selector.

The following is an example of an animation with a keyframe selector that includes multiple comma-separated percentage values and/or the keyword keyframe selectors from and to.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

Copy after login

The @keyframes rule definition above: The element's top offset will be equal to zero at the beginning, halfway through, and at the end of the animation, and it will be equal to zero at one-quarter and three-quarters of the way. 100px; This means that the element moves up and down several times during the animation loop.

css @keyframes Specify animation rule example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/* Safari and Chrome */
			}

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

Copy after login

What custom rules are used for css3 animation?

(Learning video sharing:

css video tutorial )

The above is the detailed content of What custom rules are used for css3 animation?. For more information, please follow other related articles on the PHP Chinese website!