css-动画 transition
transition
img{
transition-property: height; // 动画的结束状态
transition-duration: 1s; // 时间
transition-delay: 1s; // 延迟时间
transition-timing-function: ease; // 速度 默认速度是ease 逐渐放慢
}
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
CSS Animation
首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。
div:hover {
animation: 1s rainbow;
}
上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。
默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
div:hover {
animation: 1s rainbow infinite;
}
也可以指定动画具体播放的次数，比如3次。
div:hover {
animation: 1s rainbow 3;
}
animation的各项属性
同transition一样，animation也是一个简写形式。
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
这是一个简写形式，可以分解成各个单独的属性。
div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear; //设置动画将如何完成一个周期
animation-delay: 1s;
animation-fill-mode:forwards; //定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样none|forwards|backwards|both|initial|inherit
animation-direction: normal; //是否应该轮流反向播放动画
animation-iteration-count: 3; //动画的播放次数 默认是1
}
-
animation-timing-function:
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始，然后加快，在结束前变慢
- ease-in 动画以低速开始。
- ease-out 动画以底速结束
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
-
animation-fill-mode：none|forwards|backwards|both|initial|inherit;
- none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素
- forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
- backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值
- both 动画遵循 forwards 和 backwards 的规则
- initial
- inherit; 从父元素继承该属性
-
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
- normal 默认值。动画按正常播放。
- reverse 动画反向播放
- alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
- alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
- initial 设置该属性为它的默认值
- inherit; 从父元素继承该属性
keyframes
keyframes关键字用来定义动画的各个状态，它的写法相当自由。
@keyframes 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 }
}
\
