transform ，transition， @keyframe animantion 对比

1.transform：对元素自身的改变。包括：

　　平移：translate(X/Y)

　　翻转:rotate(20deg)

　　缩放:scale(X/Y)

　　倾斜/透视：skew(..)

2.transiton:对元素css样式的改变（width，height，opacity。。。。），有动效， 包含起始和终止两个状态。

　　transition有四个属性，transition-property  transition-duration  transition-timing-function  transition-delay

　　transition: width 2s  linear 1s

3.@keyframe annimation  顾名思义，类似于flash动画，定义了一组关键帧，也就是几个状态。每个状态可以包含多个css样式

　　如：　　@keyframes mymove{

0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

以上均为css3样式，所以实际使用时注意兼容性。

转载于:https://www.cnblogs.com/hfhsummer/p/4587805.html