To figure out CSS3 's transition and animation.

Transition and animation of CSS3

To figure out CSS3 's transition and animationtransition.

The Transition property is
Transition-property,
Transition-duration,
Transition-timing-function,
Transition-delay
Short, used to set two states of an element, different states can be used pseudo-class, such as: hover, active or JavaScript dynamically set. 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 webkitel.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 will bounce!</div><div id="spin">Place mouse on  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i won  me i will spin</div><div id="accordion" class="accordion">    <a href="#first">This is first tab</a>    <div id="first"><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; /* You can remove the effect of the underline such as the link */text-Decoration:none; }.accordion a:hover{background-color: #999;}.    Accordion div{background-color: #cda; Color: #222;}.    Accordion div p{padding:20px} #accordion div{/* Hide First */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( 结束之前的循环次数)    single-animation-direction     /*{    animation-direction: normal (每次从正方向开始)animation-direction: reverse （每次从反方向开始）animation-direction: alternate （正反往复）    }*/    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%; }}