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

定义关键帧

使用关键字@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 函数中定义自己的值

步进动画

通过 animation-timing-function控制步进动画，具体操作如下

选项 说明
steps(n,start) 设置n个时间点，第一时间点变化状态
steps(n,end) 设置n个时间点，第一时间点初始状态
step-start 等于steps(1,start)，可以理解为从下一步开始
step-end 等于steps(1,end)，可以理解为从当前步开始

播放状态

使用 animation-play-state 可以控制动画的暂停与运行

  • paused：暂停
  • running：运动

可以在鼠标悬浮时运动或者暂停

填充模式

animation-fill-mode 用于定义动画播放结束后的处理模式，是回到原来状态还是停止在动画结束状态。

选项 说明
none 需要等延迟结束，起始帧属性才应用
backwards 动画效果在起始帧，不等延迟结束
forwards 结束后停留动画的最后一帧
both 包含backwards与forwards规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧

组合定义

可以使用animation组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

必须存在 animation-duration属性，否则过渡时间为0没有动画效果

赏

前端小白