transition 和 animate 关键帧动画transition 过渡（transition)是CSS3中具

transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

1、transition

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

2、transition-property

属性就是你想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个 all 就可以。

3、transition-duration

transition-duration 花费时间，单位是秒（必须写单位）s/ms，比如 0.5s，这个s单位必须写，ms 毫秒。

4、transition-timing-function

运动曲线：

5、transition-delay

规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。

animate

//animation 参数
1、animation-name 规定需要绑定到选择器的 keyframe 名称。
 
2、animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
 
3、animation-timing-function 规定动画的速度曲线。
  linear 动画从头到尾的速度是相同的。
  ease 默认。动画以低速开始，然后加快，在结束前变慢
  ease-in 动画以低速开始。
  ease-out 动画以低速结束。
  ease-in-out 动画以低速开始和结束。
  cubic-bezier(x1, y1, x2, y2) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  函数说明：https://segmentfault.com/a/1190000004618375
  
4、animation-delay 规定在动画开始之前的延迟。

5、animation-iteration-count 规定动画应该播放的次数。

6、animation-direction 规定是否应该轮流反向播放动画。
  normal 默认值。动画应该正常播放。
  alternat 动画应该轮流反向播放。
  
7、animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
  none 不改变默认行为。
  forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
  backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
  both 向前和向后填充模式都被应用。

使用示例：

div{
  animate-name:move,
  animation-duration:2s,
  ...
}

@keyframes move {
    0% {
        left: 0px;
        top: 0px;
        width: 100px;
    }
    50% {
        left: 500px;
        top: 0;
        width: 300px;
    }
    100% {
        left: 500px;
        top: 500px;
        width: 100px;
    }
}

transition 和 animate 关键帧动画