設置動畫播放時間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;
}滑鼠移入 滑鼠移出
