css3动画animation-timing-function中的cubic-bezier(n,n,n,n)
2015-09-29 17:06
423 查看
cubic-bezier即为贝兹曲线中的绘制方法。图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效:
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
也就是说第四个n是y2,和x2共同决定P2的位置
相关文章推荐
- CSS3
- EditText,TextView,Button,ImageVIew样式
- CSS3盒模型display:box详解
- CSS实现垂直居中的5种方法
- ie6,ie7,ie8 css bug兼容解决记录
- 用js+css3做一个小球投篮的动画(easing)
- 基于CSS3的自适应布局技术
- 纯CSS3实现瀑布布局
- 文档流 css中间float clear和布局
- CSS 选择器参考手册
- css 引入新字体
- css outline
- 使用 CSS3 新属性 user-select 控制网页内容的选择范围
- 前端精选文摘:css之GFC 神奇背后的原理(整理)
- 自己写 伪单例 模仿的样式
- css基础
- CSS性能优化探讨
- 纯洁CSS3实现图片墙
- (转载) css实现小三角(尖角)
- 目前流行的CSS+DIV的命名规则