CSS3中設置動畫播放時間

animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒
語法規則
animation-duration: [,]* 取值為數值，單位為秒，其默認值為“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;
}