CSS3 two ways to implement animations

1, set transition settings transition, add transform set shape, animation effect, as follows:

. divadd {transition:all 0.4s ease-in-out;         -webkit-transition:all 0.4s ease-in-out;         -moz-transition:all 0.4s ease-in-out;         -o-transition:all 0.4s ease-in-out; Transform:rotate (360deg);-ms-transform:rotate (360deg); /* IE 9 */-webkit-transform:rotate (360deg); /* Safari and Chrome */}

This kind of way is relatively small, not easy to control

2, add the animation property, set the animation effect, as follows:

. A1 {position:absolute;animation:a1 3s;opacity:0} @keyframes A1 {0% {left:10px;opacity:0}30% {Left:60px;background-co lor:pink;font-size:23px;opacity:1}90% {left:100px;background-color:red;opacity:1}100% {left:10px;opacity:0}}

　

Various attribute values can be added within square brackets after the above percentages, such as transform Ratote, left ... Add left top and other positioning don't forget to set position absolute.

All properties are:

    Animation-name:myfirst;  Animated name, used for animation reference    animation-duration:5s;  Animation duration,    animation-timing-function:linear;    animation-delay:2s;    Animation-iteration-count:infinite;    Animation-direction:alternate;    animation-play-state:running;

Animation-fill-mode
Set the state after the animation has ended
None: Default value. Do not set state outside of object animation, Dom does not animate before state
Forwards: Sets the state of the object to the end of the animation, 100% or to when the animation ends when the animation-direcdtion is set to reverse the first frame of the keyframes
Backwards: Sets the state of the object at the start of the animation (test shows that the DOM is not animated before the state)
Both: Sets the state of the object to the end or start of the animation, and the end state takes precedence

CSS3 two ways to implement animations