先把这三者做一个简单解释：

 transform： 是 转换，描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix，而其中的位移的函数名叫translate，所以说，translate是transform的一部分。 

 transition： 是 样式过渡，指的是某个CSS属性值如何平滑的进行改变，就是平常说的 动效。

而transform是没有动画效果，你改变了它的值，元素的样子就改变了。

css动画 //简写总和（常用）

animation: myfirst 5s linear 2s infinite alternate;

说明：myfirst(播放的@keyframes名称) 5s(动画播放时间) linear(速度曲线、从头到尾都相同) 2s(延迟2s播放) infinite(无限重复播放) alternate(动画在下一周期需要反向播放)

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}