Skip to content

[css] 第107天 过渡和动画的区别是什么? #1010

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第107天 过渡和动画的区别是什么?

Activity

EragonBubble

EragonBubble commented on Aug 1, 2019

@EragonBubble

相同:都会让你的页面元素动起来
区别:

过渡 transition

1.需要事件触发,比如hover,focus,checked , js改, @media query
2.一次性的
3.只能定义开始和结束状态,不能定义中间状态
举例:
transition: width 2s;

动画 animation

1.不需要事件触发
2.显示地随着时间的流逝,周期性的改变元素的css属性值。区别于一次性。
3.通过百分比来定义过程中的不同形态,可以很细腻
举例:
原生css实现闪烁的bling bling的效果

@keyframes bling-kf {
   0% { opacity: 1; }
   50% { opacity: 0.5; }
   100% { opacity: 1; }
}
.bling {
    animation: bling-kf 2s ease-in infinite;
}

不停的bling bling,很有趣的,:)

nowherebutup

nowherebutup commented on Aug 1, 2019

@nowherebutup
  • transition 必须通过时间触发,animation不用
  • transition 比较简单,animation定义更加详细的动画
dondonZh

dondonZh commented on Aug 1, 2019

@dondonZh

transition 状态更改触发
animation 可循环触发

LinStan

LinStan commented on Aug 1, 2019

@LinStan

transition 是需要事件进行触发的,且只能触发一次。 无法定义中间的状态信息,类似Flash的关键帧,中间的补间动画无法详细定义
animation 无需事件触发,并且可以周期性播放。可定义中间状态。

liuxiaole

liuxiaole commented on Aug 4, 2019

@liuxiaole
  • transition 定义的是元素可动画属性的计算值产生变化时,需要以怎样的方式过渡到目标值。可以定义过渡时间和过渡函数来控制过渡动画的效果,默认行为是瞬间切换成变化后的结果,即无动画。
  • animation 使用 @Keyframes 预定义一系列动画进程中的关键帧,关键帧中可以指定任意可动画属性的值,然后只需要应用动画到你想要的元素上并指定时间,次数,缓动函数,状态,动画结束后的行为等。

区别:

  • transition 当元素从一个状态到另一个状态时,为避免生硬的 UI 变化可以加入过渡动画效果以提升用户体验。
  • animation 应用一组预定义好的 UI 变化来传达信息或提升交互体验。
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

        @liuxiaole@haizhilin2013@EragonBubble@dondonZh@LinStan

        Issue actions

          [css] 第107天 过渡和动画的区别是什么? · Issue #1010 · haizlin/fe-interview