The difference between transition and animation of CSS3

Transition

The Transition property is
Transition-property,
Transition-duration,
Transition-timing-function,
Transition-delay
is used to set the two states of an element, and different states can be pseudo classes, such as: hover, active, or dynamically set through JavaScript. ie10+ support.

So the initial value of the transition is:

transition-delay:0s;
transition-duration:0s;
Transition-property:all;
Transition-timing-function:ease;

Usage

div {
Transition: <property> <duration> <timing-function> <delay>;
}

And there are events that can monitor transition end

El.addeventlistener ("Transitionend", updatetransition,true);

In WebKit
El.addeventlistener ("Webkittransitionend", updatetransition,true);

Instance

Html

<!--DEMO 1:fade block-->
<div id= "Fade" >
Move here!
</div>


<div id= "Nudge" >
Mouse on Me
</div>


<div id= "Bounce" >place mouse on me I'll bounce!</div>


<div id= "Spin" >place Mouse on Me I won me I won me i I won me i I won me I won me i I won I I I won me i I I won me i I Won me i I won me I won me I won me i I won me I won me i I'll spin</div>


<div id= "accordion" class= "accordion" >
<a href= "#first" >this is a tab</a>
<div id= "A" ><p>lorem ipsum </p> </div>

<a href= "#second" >this is second tab</a>
<div id= "Second" ><p>lorem ipsum </p> </div>

<a href= "#third" >this is third tab</a>
<div id= "Third" ><p>lorem ipsum </p> </div>
</div>

Css

/*
DEMO 1:fade Block
*/
div {
margin-bottom:50px;
}


#fade {
/*opacity:1;
-webkit-transition:opacity 10s Liner 10s;*/
position:relative;
Transition-property:font-size;
transition-duration:0.5s;
transition-delay:0;
font-size:14px;
}

#fade: hover {
font-size:36px;
}


* DEMO2 * *
#nudge {

-webkit-transition-property:color,
Background-color,padding-left;
-webkit-transition-duration:500ms,500ms, 500ms;
}

#nudge: hover{
Background-color: #efefef;
Color: #333;
padding-left:50px;
}




#bounce: hover {
-webkit-animation-name:bounce;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:2;
-webkit-animation-direction:alternate
}
@-webkit-keyframes Bounce {
from{margin-left:0;}
to{margin-left:250px;}
}




#spin {
-webkit-transition:-webkit-transform 10s ease-in;
}

#spin: hover{
-webkit-transform:rotate (36000DEG);
}



. Accordion a{
Display:block;
padding:5px 10px;
Background-color: #ccc;
Color: #000;

/* Can remove the link underline and other cosmetic effects * *
Text-decoration:none;

}
. Accordion a:hover{
Background-color: #999;
}
. Accordion div{
Background-color: #cda;
Color: #222;
}
. accordion Div p{
padding:20px
}

#accordion div{
/* First HIDDEN * *
height:0;
Overflow:hidden;

-webkit-transition:height 600ms Ease;
}

#accordion div:target{
height:110px;
}

Animation

The animation property is shorthand for the following properties
Animation-name:none
animation-duration:0s
Animation-timing-function:ease
animation-delay:0s
Animation-iteration-count:1
Animation-direction:normal
Animation-fill-mode:none
Usage

Animation
Animation-name
Time (Duration)
Timing-function
Time (delay)
Animation-iteration-count (number of cycles before end)
Single-animation-direction
/*{
Animation-direction:normal (each starting in the positive direction)
Animation-direction:reverse (each start in the opposite direction)
Animation-direction:alternate (positive and negative reciprocating)
}*/
Single-animation-fill-mode

Instance

<div class= "View_port" >
<div class= "Polling_message" >
Listener for Dispatches
</div>
<div class= "Cylon_eye" >
</div>
</div>

. polling_message {
Color:white;
Float:left;
margin-right:2%;
}
. view_port {
Background-color:black;
height:50px;
width:100%;
Overflow:hidden;
}
. cylon_eye {
Color:white;
height:100%;
width:80%;
background-color:red;

Background-image:linear-gradient (to right, Rgba (0, 0, 0, 0.9) 25%, RGBA (0, 0, 0, 0.1) 50%, Rgba (0, 0, 0, 0.9) 75%);

-webkit-animation:move_eye 4s linear 0s infinite alternate;
-moz-animation:move_eye 4s linear 0s infinite alternate;
-o-animation:move_eye 4s linear 0s infinite alternate;
animation:move_eye 4s linear 0s infinite alternate;
}
@-webkit-keyframes Move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@-moz-keyframes Move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@-o-keyframes Move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}
@keyframes Move_eye {
from {
margin-left:-20%;
}
to {
margin-left:100%;
}
}