CSS animation
CSS animation Animation allows most HTML elements, without the use of JavaScript or Flash!
Animation Browser Support
IE10 + support this attribute. Other low-browser version number followed by -ms-, -webkit -, - moz- or specify the use of the prefix -o- first version.
What is CSS animation?
Animation allows elements from one style to another style gradually changed. You can change many times as necessary in accordance with the required CSS properties. To use CSS animations, you must first specify the number of key-frame animation. Keyframe to keep elements with style at a particular time.
@keyframes rules
When you specify CSS style rules in @keyframes, the animation at a particular time will gradually change from the current style to the new style. To make the animation take effect, the animation must be bound to the elements. The following example "example" Animation is bound to the <div> element. Animation for 4 seconds, and gradually the background color of the <div> element is changed from "red" to "×××":
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 要将动画应用到的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，交流学习，希望新手少走弯路Note: The animation-duration property defines the time required to complete the animation. If the animation-duration attribute is not specified, the animation does not occur, because the default value is 0 (0 seconds). In the above example, we are through using the keyword "from" and "to" (represented 0% (start) and 100% (complete)) specify when the style changes. You can also use percentages. By using percentages, you can add any number of style changes as needed. When the animation is completed 25%, 50% complete, and 100% complete animation, background color change following example <div> element:
/* 动画代码 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* 将动画应用到元素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}The following example will change to 25% completion in a movie, the position of the background color again 50% and <div> element, and changed again to 100% when the animation is completed:
/* 动画代码 */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* 将动画应用到元素 */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}## delay animation
animation-delay attribute specifies the beginning of the animation delay. The following example is a 2-second delay before starting the animation:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Also it allows negative. If you use a negative value, the animation will begin playing as N seconds have been the same. In the following example, the animation will have to play like two seconds to start the same:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}Animating should run how many times
animation-iteration-count attribute specifies the number of times the animation should run. The following example will run three times before stopping the animation:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}The following example uses the value "infinite" make the animation go on forever:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}Or in a reverse circulation operation standby animation
animation-direction property specifies the animation should be forward, backward or in an alternating cycle play. animation-direction attribute may have the following values:
Normal - Animation normal playback (forward). This is the default
reverse - animation plays backward (backward)
Alternate - animation played first forward, then backward play
alternate-reverse - first play back animations, and then play the animation forward
following example will reverse (to after) run the animation:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}The following example uses the value of "alternate" to make the animation run first forward and then backward run:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}The following example uses the value of "alternate-reverse" the animation first run back, then run forward:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 Specify the animation speed profile
animation-timing-function property specifies the animation speed profile. animation-timing-function attribute may have the following values:
EASE - Specifies the slow start of the movie, and quickly, and then slowly ends (this is the default setting)
Linear - specified from the start to the end of the animation with the same velocity
ease-in - Specifies the slow start animation
ease-out - Specifies the slow end of the animation
ease-in-out - specify start and end a slower animation
cubic-bezier (n, n, n, n) - allows you to define your own in the cubic-bezier function of value
the following examples show some different velocity curves may be used:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}Specifies the fill pattern for the animation
CSS animation before playing the first keyframe or play after the last element will not affect keyframes. animation-fill-mode property can be overwritten animation is not playing (before the start of the end, or both), this attribute specifies the target element of the animation-fill-mode style this behavior. animation-fill-mode attribute can have the following values:
NONE-default values. Before executing the animation does not apply any style to an element or after
forwards - style elements will be retained by the value of the last key frame setting (depending on animation-direction and the Iteration-COUNT-Animation)
Backwards - a key element of the acquisition by the first frame style set value (depending on the direction of animation), and retains this value during the animation delay
both - the animation will follow the rules of the forward and rearward, extended in both directions animation property
the following example allows <div> element in the animation to retain the last keyframe value at the end of the style:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}The following example allows <div> element to obtain style values before the beginning of the first keyframe animation disposed (during the animation delay):
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}The following example allows <div> element to obtain style values provided by the first keyframe animation before the start, and retain the last value of the key pattern at the end of the animation frame:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}Shorthand property animation
following example uses six animation attributes:
div {
animation: example 5s linear 2s infinite alternate;
}
If everyone on the program, interested in the web front end, want to learn to learn, plan to in-depth understanding of the industry friends, we can add our front-end learning buckle qun: 767,273,102 friends, whether you are a student or want to switch, I have welcomed, not Share regularly dry, web production, website development, web development full stack, starting from 0 basis of HTML + CSS + JavaScript. jQuery, Ajax, node, angular frame until the end of the project HTML5 mobile combat [+ video tools + system] are finishing the road map, share with small partners: learning the front we are serious
CSS animation properties
The following table lists all CSS animation @keyframes rules and attributes:
| Attributes | description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | Set all shorthand property animation properties |
| animation-delay | Specify the animation start delay |
| animation-direction | Specify the animation is played forward, backward or playing alternately playing |
| animation-duration | Specify the animation to complete a cycle of how long it takes |
| animation-fill-mode | Elements of the specified style (before the animation starts, or after the end of play at the same time) animation does not play |
| animation-iteration-count | Specifies the number of animation |
| animation-name | Specifies the name of the animation @keyframes |
| animation-play-state | Specify the animation is running or paused |
| animation-timing-function | Specify the animation speed profile |