CSS 3 animation attributes

(details refer to: www.w3school.com.cn/cssref/pr_a…

I. Browser needs to know:

Internet Explorer 10, Firefox, and Opera support animation properties.

Safari and Chrome support the alternative -webkit-animation property. (WebKit is an open source browser engine.)

Note: Internet Explorer 9 and earlier versions do not support the animation property.

2. Animation property is a shorthand property used to set the following six animation properties, which can be written together (I will select several key points that I understand well below).

Example: Animation: MyMove 5S Infinite

Animation-name: mymove

Animation-restor-count: infinite

Animation – duration: 5 s

① Animation-name: specifies the name of the keyframe to be bound to the selector.

<! DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px; } to {left:200px; } } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px; } to {left:200px; } } </style> </head> <body>Copy the code

If the name after @keyframes is not the same as animation-name, the movement effect will not be achieved

Animation-duration: specifies the time it takes to complete the animation, in seconds or milliseconds. (This property must be specified, otherwise the duration is 0 and there will be no animation)

③ Animation-timing -function: specifies the speed curve of the animation (eg: animation-timing-function: linear from the beginning to the end of the animation at the same speed).

Animation-timing-function Other property values

④ animation-delay: specifies the delay before the animation starts.

⑤ animation-rotund-count: Specifies the number of times the animation should be played.

⑥ animation-direction: specifies whether the animation should be rotated backwards.

CSS3 Transform property is attached

Details refer to: www.w3school.com.cn/cssref/pr_t…

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

The most commonly used attribute is transform:rotate(9deg), where deg represents an Angle, as shown in the following example:

<! DOCTYPE html> <html> <head> <style> div { margin:30px; width:150px; height:100px; background-color:blue; transform:rotate(9deg); -webkit-transform:rotate(9deg); </style> < head> <body> <div>Hello World</div> </body> </ HTML >Copy the code