調用動畫animation-name
animation-name屬性主要是用來調用 @keyframes 定義好的動畫。
需要特別注意:
animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），如果不一致將不具有任何動畫效果。
語法：
animation-name: none | IDENT[,none|DENT]*;
1、IDENT是由 @keyframes 創建的動畫名，上面已經講過了（animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全一致）；
2、none爲默認值，當值爲 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。
注意：
需要在 Chrome 和 Safari 上面的基礎上加上-webkit-前綴，Firefox加上-moz-。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div><span></span></div> </body> </html>
設置動畫播放時間animation-duration
animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒
語法槼則：
animation-duration: <time>[,<time>]*
取值<time>爲數值，單位爲秒，其默認值爲“0”，這意味著動畫周期爲“0”，也就是沒有動畫效果（如果值爲負值會被視爲“0”）。
案例演示：制作一個矩形變成圓形的動畫，整個動畫播放時間持續了10s鍾。
HTML:
<div>Hover Me</div>
CSS:
@keyframes toradius{
from {
border-radius: 0;
}
to {
border-radius: 100%;
}
}
div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
background: green;
margin: 20px auto;
}
div:hover {
animation-name: toradius;
animation-duration: 10s;
animation-timing-function: ease-in-out;
animation-delay: .1s;
}滑鼠移入 滑鼠移出
