css动画 aniamtion & @keyframes

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;
  }
} 

jsrun地址

转载于:https://www.cnblogs.com/ajanuw/p/8167252.html