Transform/Transition/Animation的区别与联系

‍

Transform，变形：‍

    首先，它的做用是变形，它是静态的！它是静态的！它是静态的！重要的话说三遍！它就像普通的CSS width/height/color属性同样，让元素展示不一样的style，一旦元素被施上transform属性，就直接显示效果。只不过它能让元素的style更modern而已。它包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等功能，固然这些变形分2D跟3D。

    既然是变形，总要基于一个基准坐标位置进行变换，2D有X-Y轴坐标，3D是X-Y-Z坐标，至于具体按照这些坐标上的那个空间点进行变化，则须要依赖transform-origin，它将做用在须要变形的Html元素上，告诉元素若是你要变化了，该围绕着那个基准点进行扭动，否则会摔得很惨。

    参考：w3cplus CSS 2D、w3cplus CSS 3D、w3school CSS 2D，w3school CSS 3D

Transition，过渡：

    首先，它的做用是过渡，是给上述的变形加上时间概念，让它在一段特定的时间里按照特定的速度进行变化（能够指定过渡依赖属性transition-property、过渡时间transition-duration、过渡速率transition-timing-function、过渡时间延迟transition-delay条件）。

    并且它的强大正是可让元素按照上述条件进行个性化：例如某个元素的style将从黄色bgcolor变为蓝色bgcolor，而且经过margin-left右移100px。那么指定transition-propertry为background-color后，背景颜色的改变将按照transition指定的时间（假设为2s）、速率（假设为linear匀速）跟延迟（假设0s不延迟）进行，而右移则是一会儿完成。所以当元素style被改变时，你将看到元素一会儿向右位移100px，而背景颜色会在2s内从黄色匀速渐变为蓝色。反之若是transition设置在margin-left上，那么颜色是一会儿变成蓝色，元素位置则会在2s内匀速移到右边100px处。

    其实费这么大力气用文字解释这个，是为了先知道然。至于因此然，不就是一堆transition参数嘛。

Animation，动画：

    仍是首先，它是动画，从效果上能够“肤浅”地认为它是Transition跟Transform（或者普通CSS属性）的组合。龙生九子（什么鬼？），但毕竟有所不一样：Animation能够经过keyframe显式控制当前帧的属性，何时干什么彻底能说了算，比Transition更灵活；Transition在过渡以后会改变元素的属性（固然不能彻底怪它，它只是让元素“这么着”地从原始属性变为目标属性），而Animation只是模拟元素的属性改变并在必定时间内按照必定速率（这些跟Transition相似）来PLAY动画，动画结束了元素本来长啥样就显示啥样，它拍拍屁股走人，LIKE A PLAYBOY。它们的目的都是让元素可以动起来，至于怎么个手法，它们确实是在如何改变属性值这方面各有千秋。参考：w3cplus CSS3 Animation

先这样吧，饭后再说。