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

2020-01-23 04:20:53 +08:00
 Livid
除了 UI UX 设计师自己个人的感觉之外，是否有任何业界的 best practice 值可以参考呢？
4592 次点击
所在节点    CSS
25 条回复
akinoniku
2020-01-23 04:23:26 +08:00
我的习惯是选个全局基准值，一般是 250ms。再针对性的逐个调试，适当加减。
POPOEVER
2020-01-23 04:53:21 +08:00
取决于组件的角色，不过一般是慢开快关，300-500ms 打开，关闭时不需要 transition
xingyue
2020-01-23 07:34:34 +08:00
233ms，666ms(认真脸~
q8164305
2020-01-23 07:38:52 +08:00
我一般 300
ericls
2020-01-23 07:39:42 +08:00
看距离
nijux
2020-01-23 08:41:15 +08:00
找了下之前看到过的几篇文章
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
2020-01-23 08:45:14 +08:00
某公司是 200-400ms
Mutoo
2020-01-23 08:57:37 +08:00
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
2020-01-23 09:22:51 +08:00
我用的最多的是 0.5s 和 0.3s
Torpedo
2020-01-23 09:33:18 +08:00
这个基本都靠设计师吧。不过实践的时候，往往普通的设计做不出好的动画。能做出好的动画的设计，又不一定精细的给你标注。
不过最近越来越不喜欢 css 动画了。方便是真的方便，但是精细操作远不如 js。
angith
2020-01-23 09:56:05 +08:00
据说 300 是最舒服的
Austaras
2020-01-23 10:34:21 +08:00
有啊,antd...
GzhiYi
2020-01-23 11:11:46 +08:00
.2s
learnshare
2020-01-23 13:51:55 +08:00
短的效果 0.2~0.3s 比较合适
Melodyer
2020-01-23 15:18:10 +08:00
350ms
jaynos
2020-01-23 16:53:44 +08:00
自己一般用.25s 或者.35s ，纯自己感觉，没有依据
whypool
2020-01-23 17:46:55 +08:00
.3s 用得多
Sivan
2020-01-23 19:19:41 +08:00
Material Design 有涵盖，在 Motion 的设计规范中。
marcushbs
2020-01-23 20:18:22 +08:00
站长新增的回复区 div transition 动画不错啊！
Junh
2020-01-23 21:34:20 +08:00
一律 250

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/639956

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX