没有中间值过度的属性无法使用帧动画

定义关键帧

使用关键字@keyframes来声明关键帧

  • from表示开始
  • to表示结束
  • 使用百分数表示动画到百分之几的位置

如:

@keyframes box {
  from {

  }
  to {

  }
  /* 或者 */
  /* 0% {

  }
  100%{

  } */
}

不设置0%和100%时默认使用元素初始样式,时间点可以同时设置,例如25%,75%{}就可以在两个时间点同时生效

使用关键帧

使用动画

元素属性中使用animation-name声明动画,可以声明多个动画,使用逗号隔开;使用animation-duration声明动画时间,多个时间并列会自动对应相应的name,如果动画个数多于时间个数,会从第一个时间开始依次使用

.class {
  animation-name: box, float-box;
  animation-duration: 6s, 3s;
}

如果多个动画存在属性冲突,后出现的权重高,如果后出现的执行完了,先设置的效果还没结束,就会再执行先设置的效果

重复动画

使用animation-iteration-count 规则设置动画重复执行次数,设置值为 infinite 表示无限循环执行,控制多个动画重复次数的规则跟时间控制一样

动画方向

使用animation-direction规则设置动画的方向

  • normal——从0%到100%运行动画
  • reverse——从100%到0%运行动画
  • alternate——先从0%到100%,然后从100%到0%
  • alternate-reverse——先从100%到0%,然后从0%到100%

延迟动画

使用 animation-delay 规则定义动画等待多长时间后执行。

动画速率

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 开始慢,然后快,慢下来,结束时非常慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in 开始慢,结束快(等于 cubic-bezier(0.42,0,1,1))
ease-out 开始快,结束慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out 中间快,两边慢(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值