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