First understanding of transition animation effect (example)

Example of animating multiple properties together

< body > 
    < p > Multiple properties of the box are animated together: width, height, background-color, transform. Hover the cursor over the box to see the animation. </ p > 
    < div class ="box" ></ div > 
</ body >

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 　　　　　　　　　　　　　　//默认简写方法transition: <property> <duration> <time-funtion> <delay>
        background-color 2s, -webkit-transform 2s;　　　　　　　　　　 //transform属性，定义位置改变
    transition:width 2s, height 2s, background-color 2s, transform 2s;
} 
.box:hover { 
    background-color : #FFCCCC ; 
    width : 200px ; 
    height : 200px ; 
    -webkit-transform : rotate(180deg) ; //transform: rotate (angle) defines the rotation 
    transform : rotate(180deg) ; // The transform property together with transition can achieve many common simple animation effects.
}

css transform property reference address: http://www.w3school.com.cn/cssref/pr_transform.asp

 trasform should pay attention to the browser prefix.

Check if the transition is complete

 Fires an event when the transition is complete. This event is in standards-compliant browsers,  transitionendand in WebKit  webkitTransitionEnd. See the compatibility table at the bottom of the page for details. transitionend 事件提供两个属性:

propertyNameA string indicating the properties of the transition that has completed.

elapsedTimeA float indicating how long (in seconds) the transition has run when this event is fired. This value is transition-delaynot affected .

element.addEventListener() You can listen for this event  with the   method:

 

el.addEventListener("transitionend", updateTransition, true);

 

Highlight menu transition effect

 

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>

.menuButton { 
  position : relative ; 
  transition-property : background-color, color ; //transition sets the required properties, and when the style of the set property changes, the transition will be executed transition 
  -duration : 1s ; 
  transition-timing-function : ease-out ; 
  text-align : left ; 
  background-color : grey ; 
  left : 5px ; 
  top : 5px ; 
  height : 26px ; 
  color : white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover { 
  position : relative ; 
  transition-property : background-color, color ; //The changed element is set again, and the mouse will have the same transition effect when the mouse leaves 
  transition-duration : 1s ; 
  transition-timing -function : ease-out ; 
  background-color : white ; 
  color : black ; 
  box-shadow : 2px 2px 1px black ;
}

 

 

transitions make JavaScript smoother

 Transitions are great tools for smoothing JavaScript effects without modifying JavaScript.

 

< p > Click anywhere to move the ball </ p > 
< div id ="foo" ></ div >

var f = document.getElementById('foo');
document.addEventListener( 'click', function (ev){ //Listen to the click position
    f.style.left = (ev.clientX-25)+'px' ; //Change the corresponding position in the style property
    f.style.top = (ev.clientY-25)+'px' ; //-25 can find the midpoint of the 50px ball
},false);

p {
  padding-left: 60px;

#foo {
  border-radius : 50px ; 
  width : 50px ; 
  height : 50px ; 
  background : #c00 ; 
  position : absolute ; 
  top : 0 ; 
  left : 0 ; 
  transition :   all 1s ;
}