Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.