CSS3 animation

CSS3 Animation

With CSS3, we can create animations, which can replace many web page animated images, Flash animations, and JAVAScripts.

CSS3 @keyframes Rules

To create CSS3 animations, you will have to understand the @keyframes rules.

@keyframes rule is to create animations. Specify a CSS style and animation within the @keyframes rule that will gradually change from the current style to the new style.

CSS3 Animations

When creating animations in @keyframes, bind it to a selector, otherwise the animation won't happen any effect.

Specify that at least two CSS3 animation properties are bound to a selector:

Specify the name of the animation and specify the duration of the animation

Example

Bind the "myfirst" animation to the div element, duration: 5 seconds:

    php中文网(php.cn)

Note: You must define the name of the animation and the duration of the animation. If the duration is omitted, the animation will not run because the default value is 0.

Run the program and try it

What is CSS3 animation?

Animation is the effect of gradually changing an element from one style to another.

You can change as many styles as you want as many times as you like.

Please use percentage to specify the time when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the start of the animation, 100% is the completion of the animation.

For best browser support, you should always define 0% and 100% selectors.

Example

Change the background color when the animation is 25% and 50%, then change it again when the animation is 100% complete:

php中文网(php.cn)

注释：当动画完成时，会变回初始的样式。

注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。

Run the program and try it

Example

Change the background color and position:

    php中文网(php.cn)  
  css动画

Run the program and try it

CSS3 animation properties

The following table lists the @keyframes rules and all animation properties:

Properties	Description	CSS
@keyframes	Specifies animation.	3
animation	Shorthand property for all animation properties, except animation-play-state property.	3
animation-name	Specifies the name of @keyframes animation.	3
animation-duration	Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.	3
animation-timing-function	Specifies the speed curve of animation. The default is "ease".	3
animation-delay	Specifies when the animation starts. The default is 0.	3
animation-iteration-count	Specifies the number of times the animation is played. The default is 1.	3
animation-direction	Specifies whether the animation plays in reverse in the next cycle. The default is "normal".	3
animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3