欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css动画 aniamtion & @keyframes

程序员文章站 2022-05-02 20:29:39
...

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地址