CSS3 animation - animation properties

 The CSS3 animation animation property is a standard property used by CSS to design webpage animations. CSS3 animation has many different properties and effects that can be set to control the animation movement, movement direction, color change... and other effects, which are very powerful. , CSS3 animation property can even achieve traditional animation effects that need to be designed with JavaScript or Flash. The advantage is that less complex animations can be designed without JavaScript at all, and it has the advantage of consuming resources. If you want to use JavaScript to design the same effect Animations usually require more complex code and consume more resources. CSS3 animation delegates the animation generation to the browser, which is also helpful for animation optimization.

To use the animation properties, you only need to set the properties of the animation and the keyframes to make the animation run easily, but the support level of each browser is not consistent, so in the CSS syntax, you will need to add a special browser The written prefix (prefix), this part will be seen in the example.

Basic setting 1: CSS3 animation animation property syntax

animation: name duration timing-function delay iteration-count direction;

There are six basic properties of CSS3 animation that can be used, namely name, duration, timing-function, delay, iteration-count, direction. These six properties are used to control various animation effects of animation elements. One animation can use these six properties. After you have finished writing, you can also design the value of each attribute separately. The effects of these six attributes are shown in the table.

CSS3 animation animation property list

Attributes	Description
animation-name	Define the keyframes @keyframes name of the animation.
animation-duration	Define the time for the animation to execute once, in seconds or milliseconds.
animation-timing-function	Define the speed curve of the animation execution, such as linear linear or low speed start.
animation-delay	Define the time from the completion of the animation preparation to the start of the action. The unit can be seconds. If it is 0s, it means no delay.
animation-iteration-count	Define the number of times the animation is executed repeatedly. If you want to execute infinitely, you can use infinite.
animation-direction	Define whether the animation needs to be executed in the reverse direction after one time. If you want to execute the animation in reverse, you can use alternate.

Basic setting 2: @keyframes

keyframe settings The keyframes setting can be said to be the key to the CSS3 animation effect. If the keyframe settings are missing, the animation will not run. There are two important points to set the keyframes. They are: Where to start (from) and where to end (to), the key frame is to judge the start time and end time of the animation through percentage, 0% represents the start point of the animation, and 100% represents the end point of the animation , Use from and to to set, this part will also be seen in the example. The key frame describes the appearance of the animation creation process, that is to say, in addition to using the key frame to control the running of the animation, you can also control the color change of the animation.

CSS3 animation example 1: Move the DIV block from left to right

<style type="text/css">
<!--
#D1{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove 5s infinite; /*IE*/
    -moz-animation:TestMove 5s infinite; /*FireFox*/
    -webkit-animation:TestMove 5s infinite; /*Chrome, Safari*/
}
@keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
@-moz- keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
@-webkit-keyframes TestMove{
    from {left:0%;}
    to {left:80%;}
}
-->
</style >
<div style="width:700px;border:1px #ccc solid;padding:20px;">
<div id="D1"></div>
</div>

Example effect

Example 1 presents the basic DIV block moving effect. In the CSS syntax, the basic size, color and position of the D1 block are set first, and then an animation effect that is repeated for 5 seconds is designed through the animation property. The key frame setting block is set from The left 0% runs to the right 80%, the red DIV block moves from the left to the right, and then changes back to the left to start running again and again, the whole animation effect is executed continuously and repeatedly.

In the example, the animation attribute and the keyframes are prefixed with prefixes. This function is to allow different browsers to support the animation effect. Among them, "-moz-" is for FireFox to support, "-webkit -" is to allow Chrome and Safari to support, neither prefix is ​​shown for IE, IE10 began to support CSS3 animation properties, IE9 and earlier versions of IE browsers do not support animation effects.

CSS3 animation example 2: Let the DIV block move back and forth

<style type="text/css">
<!--
#D2{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove2 5s infinite alternate; /*IE*/
    -moz-animation: TestMove2 5s infinite alternate; /*FireFox*/
    -webkit-animation:TestMove2 5s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
@ -moz-keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
@-webkit-keyframes TestMove2{
    from {left:0%;}
    to {left:80%;}
}
-->
</style>
<div style="width:700px;border:1px #ccc solid;padding:20px;">
<div id="D2"></div>
</div>

Example effect

The red DIV block in example one runs from the left to the right, and then jumps back to the left to start again. This does not feel smooth. If we change the movement of the red DIV block to run to the right and then run back to the left in the opposite direction, The whole animation has become smoother. The code of Example 2 is similar to the example. The main difference is the use of alternate animation-direction execution effect. In order to make the example code cleaner, we also write the alternate directly. In the animation properties, does the modified red DIV block feel smoother? As mentioned in the first paragraph, the animation property can not only make moving animations, but also color changing animations. Please see example three.

CSS3 animation example 3: Let the DIV block change color

<style type="text/css">
<!--
#D3{
    width:200px;
    height:100px;
    background:red;
    position:relative;
    animation:TestMove3 3s infinite alternate; /*IE*/
    -moz-animation: TestMove3 3s infinite alternate; /*FireFox*/
    -webkit-animation:TestMove3 3s infinite alternate; /*Chrome, Safari*/
}
@keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange;}
}
@-moz-keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange;}
}
@-webkit-keyframes TestMove3{
    from {background-color:red;}
    to {background-color:orange ;}
}
-->
</style>
<div style="width:700px;border:0px #ccc solid;padding:20px;">
<div id="D3"></div>
</div>

Example effect

In the third example, we enlarged the DIV block a bit to make it look clearer. The focus of the color change is the setting of the key frame. Let’s first look at the setting of the D3 block in the CSS code. The basic size, color and position are all After setting, start the setting of animation properties. This time the change time is set to 3 seconds, which is also infinitely executed. There is also reverse execution. After the basic setting of block animation is completed, immediately enter the focus of color change, the keyframes of keyframes Set, the effect of the animation on is red background color, and the end of the animation is orange background color, so the rectangular DIV block will change between red and orange.

• The syntax "from {background-color:red;}" sets the block background color to red
• The syntax "from {background-color:orange;}" sets the block background color to orange

Although CSS3 animation animation properties are a bit complicated at first, they have more advantages than using JavaScript to design these effects, and after a little familiarity, they are actually quite simple, and you can design more than examples. Rich animation effects.