The difference between transition and animation of CSS3

Source: Internet
Author: User
Tags count end

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%;
}
}



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.