Macro Da

每天学一点,成长多一点!

CSS和JS缓动函数速查表

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

现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板。

本页可以在每次你需要时,帮助你找到想要的缓动函数。

《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》
1. linear 2. swing 3. easeInQuad 4. easeOutQuad 5. easeInOutQuad 6. easeInCubic
《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》
7. easeOutCubic 8. easeInOutCubic 9. easeInQuart 10. easeOutQuart 11. easeInOutQuart 12. easeInQuint
《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》
13. easeOutQuint 14. easeInOutQuint 15. easeInExpo 16. easeOutExpo 17. easeInOutExpo 18. easeInSine
《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》
19. easeOutSine 20. easeInOutSine 21. easeInCirc 22. easeOutCirc 23. easeInOutCirc 24. easeInElastic
《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》
25. easeOutElastic 26. easeInOutElastic 27. easeInBack 28. easeOutBack 29. easeInOutBack 30. easeInBounce
《CSS和JS缓动函数速查表》 《CSS和JS缓动函数速查表》        
31. easeOutBounce 32. easeInOutBounce        

CSS

CSS 属性 transition 和 animation 允许你指定缓动函数。 不幸的是,他们不支持所有的缓动函数,所以你必须指定贝赛尔曲线实现缓动函数。

选取缓动函数以显示贝赛尔曲线。

div {
  -webkit-transition: all 600ms 缓动函数的贝赛尔曲线;
  transition:         all 600ms 缓动函数的贝赛尔曲线; 
}

SCSS

Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀,还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。

div {
@include transition(all 600ms ceaser($缓动函数名称));
}

JavaScript

使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。

div.animate({ top: \'-=100px\' }, 600, \'缓动函数名称\', function () { … })

 

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注