CSS Transitions and animations

First, Transition (transition):

1. Specify the name of the property used;

2. The specified length of time;

3. With the use of hover.

div{

width:100px;

height:50px;

background:red;

Transition:width 5s linear 2s;

}

div:hover{

width:1200px;

height:200px;

　　　　　　　　

}

Second, animation (animation):

@keyframe rules are used to create animations. (The browser prefix must be added before the code to achieve compatibility)

1. Binding selector;

2. Animation name;

3. The duration of the animation.

div{

width:100px;

height:50px;

background:red;

border:1px Soild Black;

position:relative;

Animation:myfirst 5s linear 2s infinite;

}

@keyframe myfirst{

0% {backgroud:black; left:0px; top:0px;}

25%{background:yellow;left:200px;top:0px;}

50%{background:green;left:200px;top:200px;}

75%{background:bule;left:0px;top:200px;}

100%{background:red;left:0px;top:0px;}

}

CSS Transitions and animations