CSS3 Animation Note_html/css_WEB-ITnose

css3 animation

In CSS3, you can create complex animation sequences through animation, which like the transition attribute is used to control CSS properties to achieve animation effects.
Animation mainly consists of two parts to achieve animation effects.

1. Declare an animation through keyframes similar to those in Flash animation.
   
2. Call the animation declared by the keyframe in the animation attribute to achieve a more complex animation effect.

Declare key frames

In CSS3, @keyframes are called key frames.
The syntax rules of @keyframes: the name starts with @keyframes, followed by the name of the animation (animation-name), plus a pair of curly brackets "{...}", with multiple different names in the brackets Style rules for time periods. A style rule in @keyframes is composed of multiple percentages, and each percentage style rule can set different style attributes. You can use the keyword "from", "to" represents the start and end of an animation, "from" is equivalent to 0%, and "to" is equivalent to 100%.

@keyframes yxz { 0% {    margin-left: 100px;    background: green; } 40% {    margin-left: 150px;    background: orange; } 60% {    margin-left: 75px;    background: blue; } 100% {    margin-left: 100px;    background: red; }}

Here we define an animation called "yxz". Its animation starts from 0% and ends at 100%. It also goes through two processes of 40% and 60%. The above The specific meaning of the code is: when the "yxz" animation is at 0%, the element is positioned at the left position of 100px and the background color is green. Then at 40%, the element transitions to the left position of 150px and the background color is orange. At 60%, the element transitions to The left position is 75px, the background color is blue, and the final position element that ends the animation 100% returns to the starting point where the left position is 100px, and the background color becomes red. Assume that we only give this animation 10 seconds of execution time, then the execution status of each segment is as shown below:

The key frames in @keyframes do not have to be in order To specify, you can actually specify keyframes in any order, because the order of keyframes in the animation is determined by the percentage value rather than the declared order.

@keyframes yxz{	0%,40%{		width:200px;		height:200px;	}	20%,60%,80%{		width:100px;		height:100px;	}	100%{		width:0;		height:0;	}}

In this example, the same style is applied to 0% and 40%, the same style is also applied to 20%, 60%, and 80%, and another style is applied to 100%.
These two animations have no effect because they are not attached to any elements. After declaring @keyframes animation, for the animation to take effect, you need to call the animation declared by @keyframes through CSS properties.

Call keyframes

Use the animation attribute animation to call the animation declared by @keyframes. The animation attribute, animation, is a composite attribute that contains eight sub-attributes. The syntax is as follows:

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *

　animation-name: mainly used to specify the name of a keyframe animation. This name must be the same as the name declared by @keyframes . When css loads animation, the corresponding name will be used to execute it.

animation-name:none | IDENT [,none | IDENT] *

IDENT: is the name of the animation created by @keyframes.
None: Default value. When the value is none, there is no animation effect and can be used to override the animation.

　animation-duration: Mainly used to set the time required for animation playback. The unit is s (seconds) or ms (milliseconds). The default value is 0.

animation-duration:<time> [,<time>] *

　animation-timing-function: Mainly used to set the animation playback speed.

Similar to transition-timing-function, you can click to view it.

　animation-delay: Mainly used to set animation delay time.

animation-duration:<time> [,<time>] *

When time is a positive integer, it is the delay time, and when it is a negative integer, it will truncate the playback time (truncate part of the time used by animation-duration, that is to say, skip this part of the value and proceed directly to the subsequent animation )　

　animation-iteration-count: Mainly used to set the number of times the animation is played.

animation-iteration-count: infinite | <number> [,infinite | <number>] *

Usually an integer, floating point numbers can also be used. The default value is 1. If the value is infinite, the animation will play infinitely.

　animation-direction: Mainly used to set the direction of animation playback.

animation-direction:normal | alternate [,normal | alternate] *  

The default value is normal, and the animation plays forward every time it loops. alternate, the animation plays forward once and backward once.

　animation-play-state: Mainly used to control the state of animation playback.

animation-play-state:running | paused [,running | paused] *

Running is the default value, which means playing. Playback can be stopped by paused.

　animation-fill-mode: Mainly used to set attributes outside of animation time, that is, attributes before the animation starts or after it ends.

animation-fill-mode:none | forwards | backwards | both

The default value is none, which means the animation is executed and ended on schedule. When the animation ends, it will return to the initial state. forwards, when the animation ends, stay at the last frame (keep the last state). backwards, quickly applies the first frame when the animation starts. both, has the functions of forwards and backwards at the same time.

Apply what you learn. After learning the basic knowledge of animation, you need to practice and put what you have learned to use. You can copy the code and view the effect in the browser.

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    /*元素从左边出现*/    @keyframes bga {        0% {            left: -500px;        }        100% {            left: 0;        }    }    /*元素从下边出来*/    @keyframes bgb {        0% {            top: 350px;        }        100% {            top: 0;        }    }    /*元素从小到大*/    @keyframes bgc {        0% {            transform: scale(0.1);        }        100% {            transform: none;        }    }    /*元素从大到小*/    @keyframes bgd {        0% {            transform: scale(2);        }        100% {            transform: none;        }    }    /*元素旋转并放大*/    @keyframes bge {        0% {            transform: rotate(-360deg) scale(0.1);        }        100% {            transform: none;        }    }    /*选中元素时，隐藏其他元素*/    @keyframes no {        0% {            z-index: 23;        }        100% {            z-index: 23;        }    }    /*兼容webkit浏览器*/    @-webkit-keyframes bga {        0% {            left: -500px;        }        100% {            left: 0;        }    }    @-webkit-keyframes bgb {        0% {            top: 350px;        }        100% {            top: 0;        }    }    @-webkit-keyframes bgc {        0% {            transform: scale(0.1);        }        100% {            transform: none;        }    }    @-webkit-keyframes bgd {        0% {            transform: scale(2);        }        100% {            transform: none;        }    }    @-webkit-keyframes bge {        0% {            transform: rotate(-360deg) scale(0.1);        }        100% {            transform: none;        }    }    @-webkit-keyframes no {        0% {            z-index: 23;        }        100% {            z-index: 23;        }    }    * {        margin: 0;        padding: 0;    }    html, body {        height: 100%;    }    img.bg {        width: 100%;        height: 100%;        position: fixed;        left: 0;    }    .demo div {        position: absolute;        z-index: 9999;    }    a {        display: block;        width: 100px;        height: 100px;        background: rgba(255, 0, 0,.2);        margin-bottom: 15px;        text-decoration: none;        color: #ffffff;    }    #bga:target {        z-index: 100;        -webkit-animation:bga 2s ease;        animation:bga 2s ease;    }    #bgb:target {        z-index: 100;        -webkit-animation:bgb 2s ease;        animation:bgb 2s ease;    }    #bgc:target {        z-index: 100;        -webkit-animation:bgc 2s ease;        animation:bgc 2s ease;    }    #bgd:target {        z-index: 100;        -webkit-animation:bgd 2s ease;        animation:bgd 2s ease;    }    #bge:target {        z-index: 100;        -webkit-animation:bge 2s ease;        animation:bge 2s ease;    }</style></head><body><div class="demo">    <div>        <ul>            <li><a href="#bga">第一张</a></li>            <li><a href="#bgb">第二张</a></li>            <li><a href="#bgc">第三张</a></li>            <li><a href="#bgd">第四张</a></li>            <li><a href="#bge">第五张</a></li>        </ul>    </div>    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i3/2406102577/TB2OH62dFXXXXbDXpXXXXXXXXXX_!!2406102577.jpg"  id="bga" / alt="CSS3 Animation Note_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i1/2406102577/TB2ER.mdFXXXXXLXXXXXXXXXXXX_!!2406102577.jpg"  id="bgb" / alt="CSS3 Animation Note_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i2/2406102577/TB2E3IXdFXXXXXbXpXXXXXXXXXX_!!2406102577.jpg"  id="bgc" / alt="CSS3 Animation Note_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i3/2406102577/TB2M9.idFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg"  id="bgd" / alt="CSS3 Animation Note_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i2/2406102577/TB2VEZidFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg"  id="bge" / alt="CSS3 Animation Note_html/css_WEB-ITnose" ></div></body></html>

CSS3 animation completed.