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

作者：Jovey
链接：http://www.jianshu.com/p/d999f090d333
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

CSS — 贝塞尔曲线(cubic-bezier)的更多相关文章

  1. 计算机图形学：贝塞尔曲线（Bezier Curve）

    计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.

  2. 实用的 CSS — 贝塞尔曲线(cubic-bezier)

    欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...

  3. css贝塞尔曲线模仿饿了么购物车小球动画

    在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  4. 贝塞尔曲线（cubic bezier）

    对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...

  5. 再谈CSS动画 - 说点不知道的（一）贝塞尔曲线

    今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...

  6. CSS总结六：动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用

    transition-property transition-duration transition-timing-function transition-delay animation-name a ...

  7. iOS开发 贝塞尔曲线

    iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00  博客园-所有随笔区 原文  http://www.cnblogs.com/moyunmo/p/ ...

  8. iOS开发 贝塞尔曲线UIBezierPath

    最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...

  9. Android -- 贝塞尔曲线公式的推导

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...

随机推荐

  1. 【Asp.net入门01】动态网站基础知识

    本节将介绍: 网站搭建流程 动态网站相关基础概念 网页的访问原理 使用浏览器访问网站是我们几乎天天在做的事情.以前我们只需要关注网页内容,作为网站开发人员,从现在开始我们要关注更深层次的东西了. 1. ...

  2. ubuntu thrift

    1.下载 http://www.apache.org/dyn/closer.cgi?path=/thrift/0.9.2/thrift-0.9.2.tar.gz 2.解压 tar -xvf thrif ...

  3. linux命令总结之traceroute命令

    通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...

  4. matlab和C语言实现最小二乘法

    参考:https://blog.csdn.net/zengxiantao1994/article/details/70210662 Matlab代码: N = ; x = [ ]; y = [ ]; ...

  5. python---基础知识回顾（十一）图像处理模块PIL

    前戏: 虽然PIL没有入OpenCV那样强大的功能,但是所提供的功能,在一般的图像处理中足够使用. 图像类别: 计算机绘图中有两类图像:一类是矢量图,另一类是点阵图(位图) 矢量图:基于计算机数字对象 ...

  6. jquery实现行列的单向固定和列的拖拽

    其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...

  7. 组合数学及其应用——polya计数

    在处理类似下面的问题中,一般的计数方法会出现问题:假如你要用红.蓝两种颜色给一个正四面体的四个顶点着色,试问存在多少种不同的着色方案? 在高中我们常用的方法是模拟涂色过程,分情况讨论,然后基于分步乘法 ...

  8. c++虚函数&重写

    虚函数是C++中实现多态的一种方法,父类A的一个函数声明为虚函数,在子类B中覆盖定义之后,当在调用的时候使用A*a=new B(),此时调用对应的那个虚函数的名字,则会执行B中的函数.当父类中没有定义 ...

  9. An Insight to References in C++

    ［An Insight to References in C++］ 引用的本质是常指针.占用的内存和指针一样. 参考:http://www.codeproject.com/Articles/13363 ...

  10. 20155325 2016-2017-2 《Java程序设计》第5周学习总结

    教材学习内容总结 Java中把正常流程放try块中,错误(异常)处理放catch块中. Error及其子类写程序不用处理,最多留个日志.因为这种错误Java应用程序本身是无力回复的. 在使用throw ...