css3中关于transform、transition和animation的区别介绍

我们用CSS3写动画效果的时候经常会用到这几个属性，那么他们之间有什么区别呢？
transform

transform是才css3动画的主要部分，可以实现旋转、缩放、倾斜、移动等动画，
主要用到的有
•rotate(角度)：沿中心点旋转一定的角度，例如：rotate(30deg);
•scale(方法倍数)：沿中心点放大一定的倍数，例如：scale(2);
•translate(x轴上的位移，y轴上的位移)：左上角移动到相应的位置：例如translate(100px,100px);
•skew(x轴上的倾斜角度,y轴上的倾斜角度)：改变元素的倾斜角度，例如：skew(30deg, 60deg);
值得注意的是transform变化以后，不会改变元素固有的属性，可以理解为只是在视觉上产生了变化（只是改变状态未改变其真正的属性）。
注意transform在单独使用的时候并不会产生动画效果，页面加载的时候就已经在变化后的状态了，所以需要搭配transition使用，产生动画效果

transition
transition的中文翻译的意思是 过渡 ，从字面理解其实也是动画的一种。对于指定的属性在发生变化的时候，浏览器自动按照指定的时间进行自然的过渡。
他的主要作用于：
1.过渡效果css属性的名称。(width, height, left, right或者用all表示所有属性都可以)
2.完成过渡效果需要多少秒或毫秒 (2s)
3.规定速度效果的速度曲线 (linear匀速\ease慢快慢\eare-in慢快\eare-out快慢\ease-in-ou慢快慢,和eare速度上有差异)，这个属性还可以使用cubic-bezier(n,n,n,n)自己定义，n的范围在0-1之间。
4.定义过渡效果何时开始(2s)

animate
animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。

animation-fill-mode属性值：

none: 默认值，播放完动画后，画面停在起始位置

forwards: 播放完动画，停在animation定义的最后一帧

backwards: 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值。

关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。具体格式为：

@keyframes 动画名称{

  时间点 {元素状态}

  时间点 {元素状态}

}

/*第一屏动画*/
@keyframes fly01 {
    from {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
    to {
        transform: translateY(-50px);
    }

}