Home >Web Front-end >CSS Tutorial >What custom rules are used for css3 animation?
What custom rules are used for css3 animation?
- 青灯夜游Original
- 2021-12-10 13:38:412382browse
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;}}".
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;}}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 ...
}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;
}
@keyframes change-bg-color {
from{
background-color: red;
}
50% {
background-color: blue;
}
to{
background-color: red;
}
}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;
}
}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>
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!