Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

ajycc20

ajycc20 commented on Aug 28, 2019

@ajycc20

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

LinStan

LinStan commented on Aug 28, 2019

@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

viccowang commented on Aug 28, 2019

@viccowang

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

nowherebutup

nowherebutup commented on Aug 28, 2019

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

mrzp2 commented on Aug 28, 2019

@mrzp2

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

qhdxwdm

qhdxwdm commented on Aug 28, 2019

@qhdxwdm

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@viccowang@ajycc20@LinStan@nowherebutup

        Issue actions

          [css] 第134天 transition、animation、transform三者有什么区别? · Issue #1121 · haizlin/fe-interview