动画 animation

实验网站

选择参数值: Animation Generator - bfotool

官方文档: animation | MDN

规则

animation: 动画名 持续时间 延时 运动函数 播放次数 播放方向 模式 暂停开始;

用于对 平面元素 执行 动画

参数

• 动画名(-name)

  • 意义：指定名称，用于后面@keyframes详细定义

• 持续时间(-duration)

  • 单位：ms或者s
  • 意义: 整个动画 持续的时间

• 延时(-delay)

  • 可不写，很少用
  • 单位：ms或者s
  • 意义: 动画被触发后的 延迟时间

• 运动函数(-timing-function)

  • 单位：px
  • 意义: 动画执行遵循的 速度-时间 函数曲线
  • 例子
    • ease <==> 默认值，开始慢 中间快 结束慢
    • linear <==> 全程匀速
    • ease-in <==> 开始慢，结束快
    • ease-out <==> 开始快，结束慢
    • ease-in-out <==> 开始慢，结束也慢
    • cubic-bezier(a,b,c,d) <==> 自定义4个值

• 播放次数(-iteration-count)

  • 可以是1、2、3...
  • 也可以是 infinite (无限执行)

• 播放方向(-direction)

  • 可不写
  • 例子
    • normal <==> 默认值: 结束一次后，重置到起点，重新开始
    • alternate <==> 交替执行: 奇数次正向，偶数次反向
    • reverse <==> 反向执行: 结束一次后，重置到终点，重新开始
    • alternate-reverse <==> 反向 + 交替

• 模式(-fill-mode)

  • 可不写，但经常需要取forwards!!!
  • 例子
    • none <==> 默认值: 结束一次后，重置到起点，重新开始
    • forwards <==> 保留最后一个 关键帧的值，应用上去
    • backwards <==> 立即应用第一个 关键帧的值
    • both <==> 第一个 和 最后一个，都应用

• 暂停开始(-play-state)

  • 可不写，很少用

  • 例子

    • running <==> 初始值: 动画正在播放
    • paused <==> 让动画暂停

  • 用途解释

    • 设置 paused 后，过一会再设置 running，能让动画从暂停处继续播放，而不是从头开始
    • 可用js在事件函数内控制暂停

      .style.animationPlayState = "paused"
      

@keyframes定义动画名

@keyframes 动画名 {
  0% {
  }
  //上下的0和100是必须有的，这中间可加其他百分比
   100% {
  }
}

• 百分比后的{}

  • 里面要定义动画不同阶段的css样式

• 百分比可替换成关键字

  • 0%可换成from，100%可换成to

例子

.block:hover {
  animation: move 3s linear infinite;
}

@keyframes move {
  100% {
    transform: translateX(350px) rotate(859.4deg);
  }
}

• 动画与过渡的区别

  • 过渡只能从一个，到另一个
  • 动画能从一个，到另一个(各种中间态)，再到另一个

• 两个区别

  • 在普通状态内配置动画4属性
    • 打开页面就自动执行，可设延迟
  • 在:hover内配置动画4属性
    • 鼠标移上去才会触发

兼容性前缀

animation:
-webkit-animation:
-moz-animation:
-o-animation: