css动画

CSS Animations是css的一个模块，它定义了如何使用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

css动画的使用

优点

创建动画非常简单：不需要学习和了解js就能实现动画效果
动画运行效果良好：用js实现的动画效果通常不是很好，但是使用css动画，浏览器的渲染引擎会根据系统尽可能让动画流畅
让浏览器控制动画序列，允许浏览器优化性能和效果：如降低位于隐藏选项卡中的动画更新频率。

配置动画

创建动画序列需要使用animation属性或其子属性来配置时间，时长或其他细节。动画动画表现是要通过keyframes来定义。

动画属性说明

animation相关属性主要包括以下几种

animation-delay: 设置延迟，即从元素加载完成后到动画序列开始执行的这段时间
animation-direction: 设置动画在每次运行完成后是反向运行还是重新回到开始位置重复运行
animation-duration: 设置动画一个周期的时长
animation-iteration-count: 设置动画重复次数，可以指定infinite无限次重复动画
animation-name: 指定由@keyframes描述的关键帧名称
animation-play-state: 允许暂停和恢复动画
animation-timing-function: 设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化
animation-fill-mode: 指定动画执行前后如何为目标元素应用样式

使用keyframes定义动画序列

使用animation设置完时间后，就需要定义动画的表现了，这个是由keyframes来实现的。每个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

用法

关键帧使用百分比来指定动画发生的时间点。0%表示动画的第一个时刻，100%表示动画的最终时刻。这两点对应的别名是from和to。如果这两点都没有指定，那么浏览器就按照计算值开始或结束动画。

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

常见动画示例

文本由浏览器窗口右边滑至左边

<div class='test'>
  这是一段可以滑动的文本，很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一段文本
</div>
.test {
  width: 100%;
  height: 100%;
  animation: slideIn 3s;
}
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0;
    width: 100%;
  }
}

增加关键帧

<div class='test'>
  这是一段可以滑动的文本，很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一段文本
</div>
.test {
  width: 100%;
  height: 100%;
  animation: slideIn 3s;
}
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  75% {
    margin-left: 30%;
    width: 200%;
  }
  to {
    margin-left: 0;
    width: 100%;
  }
}

重复动画

将上述代码中的animation属性值加上infinite,infinite是animation-iteration-count的属性值，用于设置运动重复次数。

.test {
  width: 100%;
  height: 100%;
  animation: slideIn 3s infinite;
}

来回运动

将上述代码中的animation属性值加上reverse。reverse是animation-direction的属性值，用于设置运动方向。

.test {
  width: 100%;
  height: 100%;
  animation: slideIn 3s infinite reverse;
}

使用动画事件

利用动画事件可以更好的控制动画和信息。这些事件由AnimationEvent对象表示，可探测动画何时开始结束和开始新的循环。每个事件包括动画发生的时间和触发事件的动画名称。

这个属性AnimationEvent目前很多功能尚在开发还不够成熟，因此暂时还不推荐使用。如果需要监听动画事件的话暂时还是推荐用下面添加动画事件监听器的方式来实现的

添加动画事件监听器

动画事件主要有三种：animationstart, animationend, animationiteration.添加事件监听器我们很熟悉使用addEventListener.

<div id="test">
  这是一段可以滑动的文本，很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的一段文本
</div>
<div id="output"></div>
const ele = document.getElementById('test');
ele.addEventListener('animationstart', this.listener, false);
ele.addEventListener('animationend', this.listener, false);
ele.addEventListener('animationiteration', this.listener, false);

ele.className = 'test';

<style lang="scss" scoped>
.test {
  width: 100%;
  height: 100%;
  animation: slideIn 3s 3 reverse;
}
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  75% {
    margin-left: 30%;
    width: 200%;
  }
  to {
    margin-left: 0;
    width: 100%;
  }
}
</style>

接收事件

定义一个接收事件，这里我们测试用，所以就打印一些内容供我们参考。还是上面的例子，定以接收事件listener函数。

listener(e) {
  const ele = document.createElement('li');
  switch (e.type) {
    case 'animationstart': 
      ele.innerHTML = 'Started: elapsed time is' + e.elapsedTime;
      break;
    case 'animationend': 
      ele.innerHTML = 'Ended: elapsed time is' + e.elapsedTime;
      break;
    case 'animationiteration': 
      ele.innerHTML = 'New loop started at time' + e.elapsedTime;
      break;
    default:
      break;
  }
  document.getElementById('output').appendChild(ele);
}

打印结果：

Started: elapsed time is0
New loop started at time3
New loop started at time6
Ended: elapsed time is9

参考文档：developer.mozilla.org/zh-CN/docs/…

css3动画