1、transition功能：
通過將元素的某個屬性在指定的時間內通過平滑過渡到另外屬性值來實現動畫功能。
transition：property duration timing-function
其中property表示對某個屬性進行平滑移動，duration表示在多長時間內完成屬性的平滑過渡，timing-function表示通過什麼方法過渡。
實現div元素的大小從100*100 逐漸變到600*600；
div{
width:100px;
height:100px;
transition:width 1s linear, height 1s linear;
-webkit-transition：width 1s linear, height 1s linear;
-moz-transition:width 1s linear, height 1s linear;
-o-transition:width 1s linear, height 1s linear;
-ms-transition:width 1s linear, height 1s linear;
}
div:hover{
width:600px;
height:600px;}
2、animations功能：
與transition的區別是：使用transition只能通過指定屬性的開始值與結束值，然後在這兩個屬性間進行平滑過渡的方式來實現動畫效果。而animations則是通過定義多個關鍵幀以及定義每個關鍵幀中的元素的屬性值來實現更爲複雜的動畫。
實現div元素的位置從（0，0）逐漸移動到（400，400）；
@keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-webkit-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-moz-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-ms-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
@-o-keyframes myfirst{
from {transform: translate(0，0); }
to {transform: translate(400px, 400px); }
div
{
animation: myfirst 5s linear 2s 1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s 1;
-moz-animation: myfirst 5s linear 2s 1;
-o-animation: myfirst 5s linear 2s 1;
-ms-animation: myfirst 5s linear 2s 1;
}
注意：動畫結束後，元素的狀態會回到初始狀態。
那麼如何讓動畫結束後還停留在最後一幀呢？
第一種方法：
用計時器，設定一個和動畫時長一樣的time，過time事件去執行這個函數。
setTimeout(function(){ },time);
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" >
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
position: absolute;
background:#f60;
}
@keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-webkit-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); } }
@-moz-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-ms-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-o-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
.change
{
animation: myfirst 5s linear 1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 1;
-moz-animation: myfirst 5s linear 1;
-o-animation: myfirst 5s linear 1;
-ms-animation: myfirst 5s linear 1;
}
.last{
top:400px;
left: 400px;
}
</style>
</head>
<body>
<div id="div" class="change"></div>
<script type="text/javascript">
var tt = document.getElementById('div');
setTimeout(function(){
//在動畫結束的時候給div替換last類
tt.className=tt.className.replace("change","last");
alert("animation done!!");
</script>
</body>
</html> 第二種方法：
當-webkit-animation動畫結束時有一個webkitAnimationEnd事件，只要監聽這個事件就可以了。
不同瀏覽器的AnimationEnd寫法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" >
<title>webkitAnimationEnd</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
#div{
width:200px;
height:200px;
position: absolute;
background:#f60;
}
@keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-webkit-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); } }
@-moz-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-ms-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
@-o-keyframes myfirst{
from {transform: translate(0,0); }
to {transform: translate(400px, 400px); }}
.change
{
animation: myfirst 5s linear 1;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 1;
-moz-animation: myfirst 5s linear 1;
-o-animation: myfirst 5s linear 1;
-ms-animation: myfirst 5s linear 1;
}
.last{
top:400px;
left: 400px;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var tt = document.getElementById('div');
tt.addEventListener("click", function(){
this.className = 'change';
}, false);
tt.addEventListener("webkitAnimationEnd", function(){ //動畫結束時事件
this.className = this.className.replace('change', 'last');
console.log(2);
}, false);
</script>
</body>
</html> ps:-webkit-animation動畫其實有三個事件：
開始事件 webkitAnimationStart
結束事件 webkitAnimationEnd
重複運動事件 webkitAnimationIteration