强大的CSS动画

在CSS3引入 transition 之前，CSS是没有时间轴的，所有的状态都是瞬间完成的

transition

transition用于将一个状态由瞬间完成转换成一段时间完成
如下面的对照:

transition-delay

延时 transition 的第二个参数

transition-timing-function

时间变换函数

汇总

属性分解
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;

transition 存在的问题
需要触发条件
一次执行，不可重复
只有开始和结束状态，没有中间态

animation

animation 定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制
animation-timing-function & animation-delay 同 transition

下面是 animation 的公共样式

html

<style>
  [class|=animation] {
    height: 10px;
    background-color: #eee;
  }
  [class|=animation] > div {
    height: 100%;
    background-color: pink;
    transform: scaleX(0);
    transform-origin: left;
  }
  @keyframes animation {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
</style>

animation-iteration-count

定义动画在结束前运行的次数可以是N次无限循环

animation-fill-mode

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用 animation-fill-mode 属性

animation-direction

描述了动画的播放时间轴方向

animation-play-state

属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行
另外，它的值可以被设置为暂停和恢复的动画的重放

强大的CSS动画 ​

transition ​

transition-delay ​

transition-timing-function ​

汇总 ​

animation ​

animation-iteration-count ​

animation-fill-mode ​

animation-direction ​

animation-play-state ​

应用：步进输入文字效果 ​