transition与animation的区别

相同点：
(1)指定要监听的CSS属性的变化
(2)设置定时函数改变的一个属性值变换到另一个属性值的速率
(3)指定一个时间来控制动画或过渡会花多长时间
(4)程序式描述动画和过渡的事件
(5)CSS属性变化可视化


不同点：
主要体现在触发方式，循环方式，如何定义复杂的动画，跟JS的搭配使用
(1)触发方式
transition只作为一种反应过渡到一个CSS属性已经改变了。一个常见的场景是你使用:hover伪类来改变CSS属性的值；触发一个过渡的另一种方法是使用JavaScript以编程方式添加或删除CSS类来模拟一个CSS属性改变。排我们做一个属性改变的方法。
animation动画则不需要任何显式的触发。一旦你定义动画,它将自动开始播放。


(2)循环
animation这是非常简单的。动画可以很容易地进行循环通过设置animation-iteration-count财产。您可以指定一个固定的你想让你的动画重复的次数；
transition过渡没有一个属性,用于指定多少次他们可以运行。当触发时,过渡只运行一次。你可以过渡循环通过摆弄transitionEnd事件,但这并不是特别简单,尤其是相比,动画。


(3)定义中间点/关键帧
animation动画,你可以定义关键帧,给你更多的控制你的CSS属性值不仅仅是开始和结束；
transition一个过渡,你没有太多的控制最终的结果，只有start和end两个时间帧；


(4)指定前面的属性
transition：如果变化涉及到两个属性，则需要多次指定属性
#mainContent {
    background-color: #CC0000;
    transition:background-color .5s ease-in, width .5s ease-in
}
#mainContent:hover {
    cursor: pointer;
    background-color: #000000;
    width: 500px;
}


animation：则通过帧添加任何属性变化
keyframes imageSlide {
    0% {
        left: -150px;
    }


    20% {
        left: 50px;
        height: 200px;
    }


    80% {
        left: 200px;
        height:300px;
    }


    100% {
        left: 600px;
        background-color:#FFFFFF;
    }
}


(5)与JS的相互作用

transition经常跟JS搭配，让js改动属性，从而触发transition的操作

结论：

1. 如果要灵活定制多个帧以及循环，用animation；如果仅仅是简单的from和to 效果，用 transition.

2. 如果要使用js灵活设定动画属性，用transition.