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

The knowledge of this article "HTML how to achieve complex animation and deformation" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "HTML how to achieve complex animation and deformation" article.

1. Complex animation

(1) the attributes involved:

Animation-name: animation name

Animation-duration: total duration of a single animation

Animation-timing-function: time function

Animation-delay: the time delay before playback

Animation-iteration-count: the number of times played (specific number), which is played in a loop when infinite is set

Animation-direction: playback order, where normal is played normally, alternate is played in reverse in turn, and the number of playbacks must be more than 2 times.

(2) Writing mode

@ keyframes name (choose your own name) {--> define an animation

}

12 3 4 5 6 7 8 complex animation exercise 9 10 11. Box {12 width: 200pxash 13 height: 200pxash 14 background-color: blueviolet;15 border: solid black;16 position: relative;17 top: 0X 18 / * Animation name * / 19 animation-name: demo 20 / * duration of animation * / 21 animation-duration: 5s * * 22 / * Speed of animation * / 23 animation-timing-function: cubic-bezier (0.075, 0.82, 0.165, 1); 24 / * length of delay before playback * / 25 animation-delay: 3s 26 / * playback times. You can write the specific number * / 27 animation-iteration-count: infinite;28 / * when written here, and play it in reverse when writing here. You can write normal to play normally * / 29 animation-direction: alternate;30} 31 32 @ keyframes demo {33 from {34 top: 0 35 border-radius: 0 top 36} 37 20% {38 top: 100pxscape 39 left: 100pxscape 40 border-radius: 30pxscape 41} 42 50% {43 top: 200pxscape 44 left: 100px 45 border-radius: 30px46} 47 to {48 top: 400pxscape 49 left: 400pxscape 50 border-radius: 50% 51} 52} 53 54 55 56 57 Animation practice 58 59 60 61 62

The effect is as follows:

2. Box deformation

(1) deformation: the visual effect of the box can be changed by deformation, and the deformation will not change the original position and size of the box, so it will not affect other elements.

(2) types of deformation

Translate (Mobile)

Scale (zoom, below 1 is reduced, above 1 is enlarged)

Skew (tilt, unit deg)

Rotate (rotation, default is rotation along the Z axis, in deg)

(3) define the origin

Transform-origin: sets the center point of the box.

(4) other attributes

Back visibility: backface-visibility

Visible: default value, visible on the back

Hidden: back is not visible

12 3 4 5 6 7 8 box metamorphosis 9 10 11. Box {12 width: 260pxash 13 height: 260pxash 14 position: relative;15} 16 17 .zheng, 18. Fan {19 width: 260pxash 20 height: 260pxash 21 font-size: 26pxscape 22 border: solid black;23 color: white 24 text-align: center;25 line-height: 260pxTrans26 position: absolute;27 top: 0background-color 28 left: 0trans29 transition: all 1s political 30 backface-visibility: hidden;31} 32 33 .zheng {34 background-color: blueviolet;35 z-index: 2 politic 36} 37 38 .fan {39 background-color: green 40 transform: rotateY (- 180deg) rotateZ (- 180deg); 41} 42 43 .box: hover .zheng {44 transform: rotateY (180deg) rotateZ (180deg); 45} 46 47 .box: hover .fan {48 transform: rotateY (0deg) rotateZ (0deg) 49} 50 51 52 53 54 positive 55 positive 55 negative 56 57 58 59 is about the content of this article "how to achieve complex animation and deformation in HTML". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow 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.