Fork me on GitHub

animation 有哪写属性

animation 所有的属性简写属性,除了animation-play-state属性
animation-name 规定@keyframes 动画的名称
animation-duration 规定动画周期所花费的秒或毫秒
animation-timing-function 规定动画速度曲线
animation-play-state 规定动画是否正在运行或者暂停
animation-delay 规定动画何时开始
animation-iteration-count 规定动画被播放的次数
animation-direction 规定动画是否在下一周期逆向地播放
animation-fill-mode 规定对象动画时间之外的状态
linear 动画从头到尾的速度是相同的。

  • animation-timing-function:规定动画速度曲线
    • ease 默认值。动画以低速开始,然后加快,在结束前变慢。
    • ease-in 动画以低速开始。
    • ease-out 动画以低速结束。
    • ease-in-out 动画以低速开始和结束。
    • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

定义动画

@keyframes go {
  0% {}
  50%{}
  100%{}
}