MDN-animation文档

animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] [fill-mode] [play-state]

初始值

animation-name: none

animation-duration: 0s

animation-timing-function: ease

animation-delay: 0s

animation-iteration-count: 1

animation-direction: normal

animation-fill-mode: none

animation-play-state: running

/*定义动画规则，声明规则名*/

    @keyframes test {

      0% {

        margin-left: 0px;

      }

      100% {

        margin-left: 200px;

      }

    }

    p:hover {

      animation-name: test; 动画名称 [name]

      animation-duration: 1s; 规定动画完成一个周期所花费的秒或毫秒 [duration]

      animation-timing-function: linear; 规定动画的速度曲线 [timing-function]

      animation-delay: 0; 规定动画何时开始 [delay]

      animation-iteration-count: 2; 规定动画被播放的次数 [iteration-count]

      animation-direction: alternate; 规定动画是否在下一周期逆向地播放 [direction]

    }

@keyframes ani{

  0% {

    height: 200px;

  }

  40%, 70%{

    height: 500px;

  }

  100% {

    height:600px;

  }

}

巴特西

css动画 aniamtion & @keyframes

MDN-animation文档

初始值

jsrun地址

最新文章

热门文章