专栏首页九彩拼盘的叨叨叨选择合适的动画缓动函数

选择合适的动画缓动函数

最近在写要兼容IE6的幻灯组件(感兴趣的点这里)。为了让幻灯的切换效果更舒服,就研究了下动画的缓动函数。

缓动函数定义

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。

为什么要使用缓动函数

在平常的生活中,物体在运动的过程中,总是时而加速,时而减速。因此我们的大脑习惯了这种物体的这种自然的运动方式。所以在应用中加入这种自然的运动方式,会让用户觉得很舒服。

常见的缓动函数

Linear

匀速运动

linear.png

Ease

慢速开始,然后变快,然后慢速结束

ease.png

Ease-out

先快后慢

ease-out.png

Ease-in

先慢后快

ease-in.png

Ease-in-out

以慢速开始和结束

ease-in-out.png

选择合适的

大部分情况下,都可以用easeOut。

不要过多的使用bounces和elastic效果,因为这两个效果往往使网站变得不和谐。在比较活泼的网站可以使用bounces效果。但也要适量。

缓动函数的持续时间参考

  • Ease-outs 或 Ease-ins: 200到500毫秒
  • Bounce 或 elastic effects:800到1200毫秒

CSS3支持的缓动函数(transition-timing-function)类型

ease,ease-in-out,ease-in,ease-out,linear

参考

工具

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文档类型和渲染模式

    浏览器根据文档类型来决定如何渲染页面。出现渲染模式的目的的为了兼容一些老旧(不符合w3c标准)的的页面。

    Joel
  • jQuery 最佳实践(译)

    原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

    Joel
  • 加些CSS,让网站变得面目全非,你会怎么做?

    Joel
  • 理解Go语言组件flag

    同时该函数返回的是指针类型,打印变量ip时记得加上指针符号来输出地址对应的值。在执行flag.String后,记得执行flag.Parse来解析命令,否则不能执...

    平也
  • python 批量修改root密码

    py3study
  • linux环境下时区无法设置(系统时间慢8个小时)的问题解决

    当有一台节点崩溃之后,重启之后,观察spark 集群日志,发现有个时间无法同步的问题。 再一仔细检查系统,输入date -R 才发现系统时间的时区设置为空。后面...

    sparkexpert
  • sanic(2):创建handler

    上文说到已经创建了app,但是此时的项目里只有两个光秃秃的文件。要完成一个完整的网站,还需要在上面添加handler和templates。

    超级大猪
  • Linux(centos7)搭建gitlab

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    拓荒者
  • 在GitLab pages上快速搭建Jekyll博客

    前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages也不错...

    Enjoy233
  • ElasticSearch里面关于日期的存储方式

    我是攻城师

扫码关注云+社区

领取腾讯云代金券