第134天 transition、animation、transform三者有什么区别?
Activity
ajycc20 commentedon Aug 28, 2019
transition:一般是通过 hover来对所选择的样式进行变化
animation:用于指定元素样式动画 可以分帧设计。0% ~ 100%
transform:对元素应用2D或3D转化。常用 translate rotate scale 等
LinStan commentedon Aug 28, 2019
transition:可以用来设置一个过渡动画效果
transition: margin-right 4s ease-in-out 1s;
animation:css动画效果设置,可以通过指定不同的关键帧设置复杂的动画效果
transform:css3新增的一个变形属性,可以对元素做2d或3d旋转,缩放,倾斜的效果
transform:rotate(9deg) scale(0.5) ;
viccowang commentedon Aug 28, 2019
transition 顾名思义,定义过渡动效;一般都是定义某些属性的过渡动效;
animation: 定义动画,而不是简单的动效了; 必须通过一个 keframe来指定动画过程;
transform: 不定义任何动效或者动画; 只用来定义"变形"; 可以作为keyframe关键帧的动画效果;
nowherebutup commentedon Aug 28, 2019
mrzp2 commentedon Aug 28, 2019
transition:自定义动画
animation: 关键帧动画,指定每一帧的动画效果
transform: 2D或者3D的变形属性
qhdxwdm commentedon Aug 28, 2019
transition:过渡效果,它有4个属性:transition: property duration timing-function delay;
transform: 应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
animate:动画效果。