CSS 动画

【学习笔记】阮一峰的网络日志——CSS动画
来源网址：https://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

CSS Transition

/* 简写模式： */
img { transition: 1s 1s height ease; }

/* 单独定义 */
img {     
    transition-property: height;     
    transition-duration: 1s;     
    transition-delay: 1s;     
    transition-timing-function: ease; 
}

属性

• transition-timing-function 规定速度效果的速度曲线
  • linear           匀速
  • ease-in         加速
  • ease-out       减速
  • cubic-bezier  函数     自定义速度模式——可以使用工具网站来定制
• transition-duration 　　规定完成过渡效果需要多少秒或毫秒
• transition-property　　　规定设置过渡效果的CSS属性的名称
• transition-delay　　　　定义过渡效果何时开始——delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

注意事项

1. 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀
2. 不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果
3. transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。
   比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等

局限

1. transition需要事件触发，所以没法在网页加载时自动发生。
2. transition是一次性的，不能重复发生，除非一再触发。
3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

CSS Animation

div:hover {
    animation: 1s 1s rainbow linear 3 forwards normal;    /* 简写形式 */
    
    /* 分解成各个单独的属性 */
    animation-name: rainbow;   
    animation-duration: 1s;   
    animation-timing-function: linear;   
    animation-delay: 1s;     
    animation-fill-mode:forwards;   
    animation-direction: normal;   
    animation-iteration-count: 3;
}

属性

• animation-name 规定需要绑定到选择器的keyframe 名称
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计
• animation-timing-function 规定动画的速度曲线
• animation-delay 规定在动画开始之前的延迟
• animation-iteration-count 规定动画应该播放的次数

/* 动画无限次播放 infinite */
div:hover {  
    animation: 1s rainbow infinite;
}
/* 指定次数播放：3次 */
div:hover {
    animation: 1s rainbow 3;
}

• animation-direction 规定是否应该轮流反向播放动画
  • normal 　　　默认值，动画按正常播放
  • reverse 　　　动画反向播放
  • alternate 　　　动画在奇数次（1、3、5…）正向播放，在偶数次(2 4 6…)反向播放
  • alternate-reverse 　　动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放
  • initial 　　　设置该属性为它的默认值
  • inherit 　　　从父元素继承该属性
• animation-play-state 规定动画正在运行还是暂停

/* 鼠标没有悬停时，动画状态是暂停；一旦悬停，动画状态改为继续播放 */
div {
    animation: spin 1s linear infinite;
}
div:hover {
    animation-play-state: running;
}

• animation-fill-mode 　　规定动画在播放之前或之后，其动画效果是否可见
  ○ none 　　　　默认值，回到动画没开始时的状态
  ○ forwards 　　　让动画停留在结束状态
  ○ backwards 　　　让动画回到第一帧的状态
  ○ both 　　　　根据animation-direction轮流应用 forwards 和 backwars规则

div:hover {
    animation: 1s rainbow forwards;
}

keyframes 的写法

keyframes 关键字用来定义动画的各个状态

div:hover {
    animation: 1s rainbow;
}
@keyframe rainbow {
    0% { background: #c00; }
    50% { background: orange; }
    100% { background: yellowgreen; }
}

0%可以用 from 代表，100% 可以用 to 代表，以上代码等价于：

@keyframes rainbow {
    from { background: #c00; }
    50% { background: orange; }
    to { background: yellowgreen; }
}

如果省略某个状态，浏览器会自动推算中间状态，所以下面都是合法的写法。

@keyframes rainbow {   
    50% { background: orange }   
    to { background: yellowgreen } 
}  
@keyframes rainbow {   
    to { background: yellowgreen } 
}

/* 甚至可以把多个状态写在一行 */
@keyframes pound {   
    from，to { transform: none; }   
    50% { transform: scale(1.2); } 
}

另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

step 函数

steps 函数制定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）
第二个参数可选，接收 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end

step-start 等同于 steps(1, start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
step-end 等同于 steps(1, end)，动画分成一步，动画执行时以结尾端点为开始，默认值为 end

div:hover {   
    animation: 1s rainbow infinite steps(10); 
}