梦想之家

CSS3中设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间单位:S秒

语法规则

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

取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)


例如:让元素从红色变化到绿色,整个变化过程持续5s时间。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>

<style>
        @keyframes changeColor {
          from {
            background: red;
          }
          to {
            background:green;
          }
        }
        div {
          width: 200px;
          height: 200px;
          background: red;
          text-align:center;
          margin: 20px auto;
          line-height: 200px;
          color: #fff;
        }
        div:hover {
          animation-name: changeColor;
          -webkit-animation-duratuib: 3s;
          -moz-animation-duration:3s;
          animatino-duration:3s;
          animation-timing-function: ease-out;
          animation-delay: .1s;
        }
</style>
</head> 
<body>
<div>Hover Me</div>

</body>
</html>

效果如图所示:
    2017-03-23_202001.png
2017-03-23_202133.png


您此刻的心情: