CSS 动画（transition和animation）

CSS Transition

基本的用法
动画的概念主要的引入是在CSS3中进行引入的，在CSS3引入transition之前，CSS是没有时间轴的，也就是说所有的变化都是在一瞬间完成的，也就是即使完成的。不会有从某一个状态慢慢转化成另外一个状态的过程，都是在一瞬间就完成，但是我们在transition这个引入之后，就可以在网站上显示一个实现的过程。

img{
    height:15px;
    width:15px;
}
img:hover{
    height: 450px;
    width: 450px;
}

在这样的一个例子中，我们会在一瞬间就实现img大小的变化，我们如果想要实现动态的效果，但是我们可以通过设置transition来指定变化所需要的时间。我们也可以设置高度来指定，动画的效果仅仅在高度上面发生，但是其他的属性，如宽度，依旧是突然发生。

img{
  transition: 1s;
  transition: 1s heigth;
}

transition-delay
我们在上面的例子里面发现我们可以在transition里面分别指定多个属性。但是这样的话就会导致宽度和高度的变化是一样的，这样就和不指定他们没有什么区别。

img{
    transition: 1s height, 1s width;
}

如果我们希望看到一个非常明显的动画效果，让height先发生变化，结束之后，再让width发生变化，这样做就很容易，就是给width指定一个delay参数

img{
  transition: 1s height,1s 1s width
}

上面的代码指定，在width在1s之后，再开始变化。也就是延迟了1s的时间。delay的真正意义在于，它指定了动画发生的顺序，可以将多个不同的transition可以连接在一起，形成复杂的效果。

transition-timing-function
transition的状态变化速度（timing function）默认并不是匀速的，而是逐渐放慢的，叫做：ease

img{
    transition: 1s ease;
}

除了ease之外还有其他的几种模式：

• linear：匀速模式
• ease-in：加速模式
• ease-out：减速
• cubi-bezier函数：自定义的速度模式

transition的各项属性
transition的完整写法

img{
  transition: 1s 1s height ease;
}

这个是最简单的写法，我们还可以单独的定义各个属性。

img{
  transition-prototype:height;
  transition-duration:1s;
  transition-delay:1s;
  transition-timing-function: ease;
}

transition注意事项：
（1）transition的兼容性已经做的很好，不需要再前面添加浏览器的前缀
（2）transition需要明确的指挥刀，开始状态和结束状态的具体数值，这样才能计算出中间的状态，比如上面的例子我们的宽度从15px到达450px。在这个过程中transition可以为我们计算，但是我们不能计算出0到auto的中间状态，也就是说一旦我们将开始或是最终状态设置为auto的话我们就不能产生动画效果，类似的情况举个例子：display：none到block等等。

transition的局限
transition的优点在于简单易用，那么是不是可以完全的取代js渲染出来的动画吗？事实证明我们现在的transition属性还存在很大的局限性：
(1)transition需要事件触发，所以没有办法在网页加载的时候自动的发生。
(2)transition是一次性的，不能重复大声的，除非是一而再在文山的被触发。
(3)transition只能定义开始状态和最终转台，没有中间状态，也就是说，只能拥有2个状态。
(4)一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation

CSS Animation需要制定动画一个周期持续的时间，以及动画的名称

div :hover{
  animation: 1s rainbow;
}

也就是说上面的代码的意思是在鼠标悬停在div元素上面的时候，会产生一个名为rainbow的动画效果，而且持续时间为1s，现在我们需要使用keyframes关键字来定义rainbow的效果：

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

其中的0%、50%、100%指的是时间轴上面的时间时刻，如果有需要的话完全可以插入更多的状态。

/*infinite的意思是可以无限次的播放*/
div:hover {
  animation: 1s rainbow infinite;
}
/*3的意思是可以播放3次*/
div:hover {
  animation: 1s rainbow 3;
}

animation-fill-mode
动画结束之后，我们会立即从结束状态跳回到开始状态。如果想要动画保持结束的状态，我们需要使用animation-fill-mode属性。

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

当然animation-fill-mode还可以使用下列值

• none：默认值，回到动画没开始时的状态。
• backwards：让动画回到第一帧的状态
• both：根据animation-direction轮流应用forwards和backwards规则。

animation-direction
我们在进行动画循环播放的时候，每一次都从结束状态跳到起始状态，在开始循环的播放。animation-direction属性，可以改变这种行为。
来说明人如何使用animation-direction这个属性，假定一个动画是这样定义的。

@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

默认情况是animation-direction等于normal。

div:hover{
  animation:1s rainbow 3 normal;
}

animation-direction指定了动画播放的方向，最常用的值是normal和reverse。效果如下图：

animation-direction

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;
  animation-direction: normal;
  animation-iteration-count: 3;
}

keyframes的写法
keyframes关键字用来定义动画的各个状态，写法非常的自由。

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

我们制定的是开始状态的标识是0%，结束状态是100%,中间状态是50%。但是我们也可以使用from来代表0%，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函数可以实现分步过渡。

animation-play-state
有的时候，动画的播放过程中，会突然停止，然后，对于动画的默认状态是跳回到动画的开始状态。如果我们希望动画可以保持停在终止状态，就要使用animation-play-state属性。

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

当前现状
现在IE10、火狐浏览器支持不带浏览器前缀的animations，但是chrome是不支持的，所以必须使用webkit前缀。