CSS Animation Summary

Referring to animation effects, we first think of JS and jquery animations, and now we can write animations with CSS3.
[email protected] defining animations

To create animations in CSS3, you need to learn @keyframes rules.

@keyframes rules are used to create animations. By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style.

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

Div{animation:myfirst 5s;-moz-animation:myfirst 5s;    /* Firefox */-webkit-animation:myfirst 5s;    /* Safari and Chrome */-o-animation:myfirst 5s;    /* Opera */}

Use percentages to specify when changes occur, or use the words "from" and "to", equivalent to 0% and 100%.

0% is the beginning of the animation, and 100% is the completion of the animation. !!!!  For best browser support, you should always define the 0% and 100% selectors.
Note: always specify the Animation-duration property, otherwise the duration is 0 and the animation will not play.

Animation-timing-function Grammar (speed curve of animation)

Animation-iteration-count syntax (number of animations played)

Animation-direction syntax (the order in which the animation is played)

Animation-play-state syntax (the playback state of the animation)

Animation-fill-mode syntax (state outside of object animation time)

2.transform2d/3d Converting animations

3.Transition transition Animations

Grammar:

Transition:property duration timing-function delay;

CSS Animation Summary