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

語(yǔ)法規(guī)則

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

取值<time>為數(shù)值，單位為秒，其默認(rèn)值為“0”，這意味著動(dòng)畫(huà)周期為“0”，也就是沒(méi)有動(dòng)畫(huà)效果（如果值為負(fù)值會(huì)被視為“0”）。

案例演示：

制作一個(gè)矩形變成圓形的動(dòng)畫(huà)，整個(gè)動(dòng)畫(huà)播放時(shí)間持續(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;
}

鼠標(biāo)移入

鼠標(biāo)移出