V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Livid
V2EX  ›  CSS

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

  •  
  •   Livid · 2020-01-23 04:20:53 +08:00 · 4381 次点击
    这是一个创建于 1526 天前的主题,其中的信息可能已经有所发展或是发生改变。
    除了 UI UX 设计师自己个人的感觉之外,是否有任何业界的 best practice 值可以参考呢?
    25 条回复    2020-01-24 11:38:50 +08:00
    akinoniku
        1
    akinoniku  
       2020-01-23 04:23:26 +08:00   ❤️ 1
    我的习惯是选个全局基准值,一般是 250ms。再针对性的逐个调试,适当加减。
    POPOEVER
        2
    POPOEVER  
       2020-01-23 04:53:21 +08:00   ❤️ 1
    取决于组件的角色,不过一般是慢开快关,300-500ms 打开,关闭时不需要 transition
    xingyue
        3
    xingyue  
       2020-01-23 07:34:34 +08:00 via Android
    233ms,666ms(认真脸~
    q8164305
        4
    q8164305  
       2020-01-23 07:38:52 +08:00 via Android   ❤️ 1
    我一般 300
    ericls
        5
    ericls  
       2020-01-23 07:39:42 +08:00 via iPhone
    看距离
    nijux
        6
    nijux  
       2020-01-23 08:41:15 +08:00   ❤️ 1
    找了下之前看到过的几篇文章
    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
        7
    Perry  
       2020-01-23 08:45:14 +08:00
    某公司是 200-400ms
    Mutoo
        8
    Mutoo  
       2020-01-23 08:57:37 +08:00   ❤️ 2
    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
        9
    alphardex  
       2020-01-23 09:22:51 +08:00
    我用的最多的是 0.5s 和 0.3s
    Torpedo
        10
    Torpedo  
       2020-01-23 09:33:18 +08:00
    这个基本都靠设计师吧。不过实践的时候,往往普通的设计做不出好的动画。能做出好的动画的设计,又不一定精细的给你标注。
    不过最近越来越不喜欢 css 动画了。方便是真的方便,但是精细操作远不如 js。
    angith
        11
    angith  
       2020-01-23 09:56:05 +08:00 via Android
    据说 300 是最舒服的
    Austaras
        12
    Austaras  
       2020-01-23 10:34:21 +08:00
    有啊,antd...
    GzhiYi
        13
    GzhiYi  
       2020-01-23 11:11:46 +08:00 via iPhone
    .2s
    learnshare
        14
    learnshare  
       2020-01-23 13:51:55 +08:00
    短的效果 0.2~0.3s 比较合适
    Melodyer
        15
    Melodyer  
       2020-01-23 15:18:10 +08:00 via iPhone
    350ms
    jaynos
        16
    jaynos  
       2020-01-23 16:53:44 +08:00
    自己一般用.25s 或者.35s ,纯自己感觉,没有依据
    whypool
        17
    whypool  
       2020-01-23 17:46:55 +08:00 via iPhone
    .3s 用得多
    Sivan
        18
    Sivan  
       2020-01-23 19:19:41 +08:00 via iPhone
    Material Design 有涵盖,在 Motion 的设计规范中。
    marcushbs
        19
    marcushbs  
       2020-01-23 20:18:22 +08:00
    站长新增的回复区 div transition 动画不错啊!
    Junh
        20
    Junh  
       2020-01-23 21:34:20 +08:00 via iPhone
    一律 250
    maplerecall
        21
    maplerecall  
       2020-01-23 22:34:59 +08:00 via Android
    这个不好说,个人认为在保证一致性的情况下按照自己的感觉来调整就好,因为动画风格也体现了不同的设计理念,比如微软是初速度很快并且收尾也相对清爽的 ease-out 类型;苹果是起始稍慢,迅速达到接近结束位置的地方后有很长的收尾过程的类型; Google 的 material design 介于中间,浏览器的默认 ease 曲线就是类似这种感觉。不说实践结果如何,至少从三家的 design guildline 来看并没有绝对的高下之分。

    不过说动画风格,除了 duration,timing function 其实更关键关键,例如同样 200ms 的 hover 动画,ease-out 就会比默认的 ease 感觉上响应快很多。css 动画还支持 bezier 曲线,可发挥的空间还是有一些的。
    kingsleydon
        22
    kingsleydon  
       2020-01-23 22:38:45 +08:00
    用弹簧动画,没有 duration
    mxalbert1996
        23
    mxalbert1996  
       2020-01-23 22:43:16 +08:00 via Android
    大概测过 iOS 的默认动画基本都是 300ms
    Archeb
        24
    Archeb  
       2020-01-24 09:46:08 +08:00 via iPhone
    默认 0.3s ,个别组件个别调整
    zhw2590582
        25
    zhw2590582  
       2020-01-24 11:38:50 +08:00
    0.1 ~ 0.3 浮动
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3747 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:37 · PVG 18:37 · LAX 03:37 · JFK 06:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.