CSS3 Animation Module

Animation module

Animation format

1. Tell the system which animation to perform

Animation-name: Animation name

3. Tell the system how long the animation lasts

Animation-duration: Time

2. Tell the system to create an animation with the name (animation name)

@keyframe Animation Name {

From (0%) {

margin-left:0;

}

to (50%) {

margin-left:500px;

}

}

Animation properties

Animation-delay tells the system to delay how many seconds to perform the animation

Animation-timing-function Set Animation speed curve

ANIMATION-ITERATION-COUNT Specifies the number of animation plays, default is 1

Animation-direcyion Specifies whether the animation will play backwards in the next cycle. The default normal, and the other is alternate, means that the animation plays backwards

ANIMATION-PLAY-STATE Specifies whether the animation executes or pauses the default running, and the other is a paused that pauses

There are three states of the animation: waiting for the state to execute State end state

Animation-fill-mode styles that specify the animation wait state and end state

None default state forwards style that keeps the last frame of the animation in the end state

Backwards lets the animation's wait state be the style of the animation first frame both forwards+backwards

Animation ligatures

Animation: Animation name animation time long animation motion speed delay time execution times round-trip animation;

CSS3 Animation Module