跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 在使用 CSS transition 时,动画时长到底应该用多少秒?
未分類
22 4 月 2020

在使用 CSS transition 时,动画时长到底应该用多少秒?

在使用 CSS transition 时,动画时长到底应该用多少秒?

資深大佬 : Livid 63

除了 UI UX 设计师自己个人的感觉之外,是否有任何业界的 best practice 值可以参考呢?
大佬有話說 (25)

  • 資深大佬 : akinoniku

    我的习惯是选个全局基准值,一般是 250ms。再针对性的逐个调试,适当加减。

  • 資深大佬 : POPOEVER

    取决于组件的角色,不过一般是慢开快关,300-500ms 打开,关闭时不需要 transition

  • 資深大佬 : xingyue

    233ms,666ms(认真脸~

  • 資深大佬 : q8164305

    我一般 300

  • 資深大佬 : ericls

    看距离

  • 資深大佬 : nijux

    找了下之前看到过的几篇文章
    1. https://www.uisdc.com/why-do-not-learn-motion-design (好像参考的 Material Design 设计规范)
    2. https://www.uisdc.com/motion-graphic-design
    3. https://www.uisdc.com/dynamic-design-landing

  • 資深大佬 : Perry

    某公司是 200-400ms

  • 資深大佬 : Mutoo

    jQuery animate 的设定

    Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is 400 milliseconds. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

  • 資深大佬 : alphardex

    我用的最多的是 0.5s 和 0.3s

  • 資深大佬 : Torpedo

    这个基本都靠设计师吧。不过实践的时候,往往普通的设计做不出好的动画。能做出好的动画的设计,又不一定精细的给你标注。
    不过最近越来越不喜欢 css 动画了。方便是真的方便,但是精细操作远不如 js。

  • 資深大佬 : angith

    据说 300 是最舒服的

  • 資深大佬 : Austaras

    有啊,antd…

  • 資深大佬 : GzhiYi

    .2s

  • 資深大佬 : learnshare

    短的效果 0.2~0.3s 比较合适

  • 資深大佬 : Melodyer

    350ms

  • 資深大佬 : jaynos

    自己一般用.25s 或者.35s ,纯自己感觉,没有依据

  • 資深大佬 : whypool

    .3s 用得多

  • 資深大佬 : Sivan

    Material Design 有涵盖,在 Motion 的设计规范中。

  • 資深大佬 : marcushbs

    站长新增的回复区 div transition 动画不错啊!

  • 資深大佬 : Junh

    一律 250

  • 資深大佬 : maplerecall

    这个不好说,个人认为在保证一致性的情况下按照自己的感觉来调整就好,因为动画风格也体现了不同的设计理念,比如微软是初速度很快并且收尾也相对清爽的 ease-out 类型;苹果是起始稍慢,迅速达到接近结束位置的地方后有很长的收尾过程的类型; Google 的 material design 介于中间,浏览器的默认 ease 曲线就是类似这种感觉。不说实践结果如何,至少从三家的 design guildline 来看并没有绝对的高下之分。

    不过说动画风格,除了 duration,timing function 其实更关键关键,例如同样 200ms 的 hover 动画,ease-out 就会比默认的 ease 感觉上响应快很多。css 动画还支持 bezier 曲线,可发挥的空间还是有一些的。

  • 資深大佬 : kingsleydon

    用弹簧动画,没有 duration

  • 資深大佬 : mxalbert1996

    大概测过 iOS 的默认动画基本都是 300ms

  • 資深大佬 : Archeb

    默认 0.3s ,个别组件个别调整

  • 資深大佬 : zhw2590582

    0.1 ~ 0.3 浮动

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具