Animations and transitions for CSS

First, Transition:

The transition shorthand property, which is used to set four transition properties in a property.

TRANSITION-PROPERTY Specifies the name of the CSS property that the transition is applied to.

Transition-duration defines the time that the transition effect takes. The default is 0.

Transition-timing-function a time curve that specifies the transition effect. The default is "ease".

TRANSITION-DELAY specifies when the transition effect begins. The default is 0.

eg

div{transition:width 1s linear 2s;  /* Firefox 4 */-moz-transition:width 1s linear 2s; / * Safari and Chrome */-webkit-transition:width 1s linear 2s; / * Opera */-o-transition:width 1s linear 2s;  
Second, Animation:

@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.

1. Animation The shorthand properties of all animated properties except the Animation-play-state property.

2, Animation-name rules @keyframes the name of the animation.

3. animation-duration specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.

4, animation-timing-function specified the speed curve of the animation. The default is "ease".

5, Animation-delay Specifies when the animation starts. The default is 0.

6. Animation-iteration-count specifies the number of times the animation is played. The default is 1.

7. animation-direction Specifies whether the animation will play backwards in the next cycle. The default is "normal".

8, Animation-play-state Specifies whether the animation is running or paused. The default is "running".

9. Animation-fill-mode specifies the state outside the animation time of the object.

eg

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

Animations and transitions for CSS