Js animation we can use to complete can be completed with the new css3 animation, but the proposed use css animation work done on the use of css do not use js
After all, css rendering better than js
Let us first understand the animation of knowledge under css
What CSS3 animations are?
Animation element is the gradual change from one style to another style effect.
You can change as many styles as many times.
To create CSS3 animations, you need to know @keyframes rules.
@keyframes rule is to create animation.
Within @keyframes rule specifies a CSS style and animation will gradually change from the current style for the new style.
keyframes myfirst {// myfirst custom animation name
from {background: red;}
to {background: yellow;}
}
Please percentage changes to the predetermined time, or with the keyword "from" and "to", equivalent to 0% and 100%.
0% is the beginning of the animation, the animation is done 100%.
For optimal browser support, you should always define the 0% and 100% of the selector.
keyframes myfirst {
0% {background: red;}
100% {background: yellow;}
}
// Bind the animation on the div element
div {animation: myfirst 5s;} // myfirst animation completes execution within 5s
It can also be expressed stage
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
CSS3 animation properties
The following table lists all animations @keyframes rules and attributes:
| Attributes | description | CSS |
|---|---|---|
| @keyframes | The provisions of animation. | 3 |
| animation | Shorthand property for all animation properties, in addition to animation-play-state property. | 3 |
| animation-name | It specifies the name of @keyframes animation. | 3 |
| animation-duration | Seconds or milliseconds predetermined animation completes takes one cycle. The default is 0. | 3 |
| animation-timing-function | Prescribed speed of the animation curve. The default is "ease". | 3 |
| animation-fill-mode | When the provisions of the animation does not play (when the animation is complete, or there is a delay when the animation does not start playback), to be applied to the style element. | 3 |
| animation-delay | When the provisions of animation begins. The default is 0. | 3 |
| animation-iteration-count | Provisions Animations are played. The default is 1. | 3 |
| animation-direction | Whether the provisions of the animation to play in reverse to the next cycle. The default is "normal". | 3 |
| animation-play-state | Whether the provisions of the animation is running or paused. The default is "running". | 3 |
1. Complete the move rule is formed a square of a square on the page
<Div> </ div> // div element
@keyframes translate {// Custom Animation
0%{
background-color: #f00;
left:0;
}
25%{
background: #0f0;
left:600px;
top:0;
}
50%{
background: #00f;
left:600px;
top:600px
}
75%{
background: #ff0;
left:0px;
top:600px;
}
100%{
background: #f00;
left:0;
top: 0;
}
}
On div {// div animation application
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
animation: translate 8s linear 0.5s infinite alternate; // name of the animation smooth transition duration 5s delay loop is executed according to the original animation path return
}
2. We can see the bottom right picture rotation under vibrato there on the page a rotating cd can be achieved by this
<img src="a.png" alt="">
@keyframes xuan {
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
img{
animate: xuan 3s linear 0.5s infinite; // page loading infinite scroll
}
