animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續(xù)的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

語法規(guī)則

animation-duration: <time>[,<time>]*

取值<time>為數(shù)值，單位為秒，其默認值為“0”，這意味著動畫周期為“0”，也就是沒有動畫效果（如果值為負值會被視為“0”）。

案例演示：

制作一個矩形變成圓形的動畫，整個動畫播放時間持續(xù)了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;
}

鼠標移入

鼠標移出