[css] 第134天 transition、animation、transform三者有什么区别？

[haizhilin2013]

第134天 transition、animation、transform三者有什么区别？

[ajycc20]

transition：一般是通过 hover来对所选择的样式进行变化
animation：用于指定元素样式动画 可以分帧设计。0% ～ 100%
transform：对元素应用2D或3D转化。常用 translate rotate scale 等

[LinStan]

transition：可以用来设置一个过渡动画效果
transition: margin-right 4s ease-in-out 1s;
animation：css动画效果设置，可以通过指定不同的关键帧设置复杂的动画效果

animation:mymove 5s infinite;
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

transform：css3新增的一个变形属性，可以对元素做2d或3d旋转，缩放，倾斜的效果
transform:rotate(9deg) scale(0.5) ;

[viccowang]

transition 顾名思义,定义过渡动效;一般都是定义某些属性的过渡动效;
animation: 定义动画,而不是简单的动效了; 必须通过一个 keframe来指定动画过程;
transform: 不定义任何动效或者动画; 只用来定义"变形"; 可以作为keyframe关键帧的动画效果;

[nowherebutup]

• transition:比较简单的过度动画
• animation: 使用keyframe自定义动画,比较详细的动画过程
• transform: 2D或者3D的变形属性

[mrzp2]

transition:自定义动画
animation: 关键帧动画，指定每一帧的动画效果
transform: 2D或者3D的变形属性

[qhdxwdm]

transition：过渡效果，它有4个属性：transition: property duration timing-function delay;
transform： 应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
animate：动画效果。