How to deal with animation in css3
Today, the editor will share with you the relevant knowledge about how to deal with animation in css3. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Animation-transition Properti
Div {
Width: 200px
Height: 200px
Background: red
Margin: 20px auto
-webkit-transition-property: width
Transition-property: width
-webkit-transition-duration:.5s
Transition-duration:.5s
-webkit-transition-timing-function: ease-in
Transition-timing-function: ease-in
-webkit-transition-delay: .18s
Transition-delay:.18s
}
Div:hover {transition: all .28s ease-in .1s
Width: 400px
}
Keyframes is called a Keyframe that begins with "@ keyframes"
@ keyframes changecolor {the declared animation can be defined by yourself
0% {
Background: red
}
40% {
Background:orange
100% {
Background: green
}
}
Div {animation-iteration-count:infinite
Animation-iteration-count:5
Animation-name:move
Animation-direction:alternate
Animation-play-state:paused
}
Set animation playback direction animation-direction
It mainly has two values: normal and alternate.
1. Normal is the default. If it is set to normal, each loop of the animation will be played forward.
2. The other value is alternate, whose function is to play the animation forward for the even number and in the opposite direction for the odd number.
one
two
3 div {
4 width: 200px
5 height: 200px
6 border: 1px solid red
7 margin: 20px auto
8}
9 span {
10 display: inline-block
11 width: 20px
12 height: 20px
13 background: orange
14 transform: translateY (90px)
15 animation-name: move
16 animation-duration: 10s
17 animation-timing-function: ease-in
18 animation-delay: .2s
19 animation-iteration-count:infinite
20 animation-direction:alternate
21}
twenty-two
23 @ keyframes move {
24% {
25 transform: translateY (90px)
26}
27 15% {
28 transform: translate (90pxPenh 90px)
29}
30% {
31 transform: translate (180px90px)
32}
33 45% {
34 transform: translate (90pxPenh 90px)
35}
36 60% {
37 transform: translate (90pxPower0)
38}
39 75% {
40 transform: translate (90pxPenh 90px)
41}
42% {
43 transform: translate (90px180px)
44}
45% {
46 transform: translate (90pxPenh 90px)
47}
48}
These are all the contents of the article "how to deal with Animation in css3". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
