CSS — 贝塞尔曲线(cubic-bezier)
cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
我们可以从下图中简要理解一下 cubic-bezier：
从上图我们需要知道的是 cubic-bezier 的取值范围:
- P0：默认值 (0, 0)
- P1：动态取值 (x1, y1)
- P2：动态取值 (x2, y2)
- P3：默认值 (1, 1)
我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。
最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。
使用
在测试例子中：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
.animation {
width: 50px;
height: 50px;
background-color: #ed3;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
.animation:hover {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
一个在线实测的地址http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67
链接：http://www.jianshu.com/p/d999f090d333
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
CSS — 贝塞尔曲线(cubic-bezier)的更多相关文章
- 计算机图形学：贝塞尔曲线（Bezier Curve）
计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.
- 实用的 CSS — 贝塞尔曲线(cubic-bezier)
欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...
- css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- 贝塞尔曲线（cubic bezier）
对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...
- 再谈CSS动画 - 说点不知道的（一）贝塞尔曲线
今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...
- CSS总结六：动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
- iOS开发 贝塞尔曲线
iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00 博客园-所有随笔区 原文 http://www.cnblogs.com/moyunmo/p/ ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
- Android -- 贝塞尔曲线公式的推导
1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...
随机推荐
- bzoj 2453 : 维护队列 带修莫队
2453: 维护队列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 952 Solved: 432[Submit][Status][Discuss] ...
- Ansible4：Ad-hoc与命令执行模块
目录 Ad-hoc 命令说明 后台执行 命令执行模块 command模块 script模块 Ad-Hoc 是指ansible下临时执行的一条命令,并且不需要保存的命令,对于复杂的命令会使用playbo ...
- Java基础-IO流对象之序列化（ObjectOutputStream）与反序列化（ObjectInputStream）
Java基础-IO流对象之序列化(ObjectOutputStream)与反序列化(ObjectInputStream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.对象的序 ...
- Lena与数字图像处理
在数字图像处理中,Lena(Lenna)是一张被广泛使用的标准图片,特别在图像压缩的算法研究中. 黑白Lena图 标准Lena (为什么用这幅图,是因为这图的各个频段的能量都很丰富:即有低频(光滑 ...
- JVM加载一个类的过程
类的加载过程 Java源代码被编译成class字节码,JVM把描述类数据的字节码.Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机 ...
- webApp 页面适配布局
webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...
- Java消息队列三道面试题详解！
面试题 为什么使用消息队列? 消息队列有什么优点和缺点? Kafka.ActiveMQ.RabbitMQ.RocketMQ 都有什么区别,以及适合哪些场景? 面试官心理分析 其实面试官主要是想看看: ...
- c++虚函数&重写
虚函数是C++中实现多态的一种方法,父类A的一个函数声明为虚函数,在子类B中覆盖定义之后,当在调用的时候使用A*a=new B(),此时调用对应的那个虚函数的名字,则会执行B中的函数.当父类中没有定义 ...
- Redis学习七：Redis的持久化-总结(Which one)
1.官网建议 2.RDB持久化方式能够在指定的时间间隔能对你的数据进行快照存储 3.AOF持久化方式记录每次对服务器写的操作,当服务器重启的时候会重新执行这些 命令来恢复原始的数据,AOF命令以red ...
- debian旧日笔记
18:45 2007-10-7 序 图形界面较好的Linux操作系统有三个主要的发行版本:RedHat, Debian, SuSE.自RedHat9后,RedHat以Fedora为名发行新的版本.仍然 ...