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. 观V8源码中的array.js，解析 Array.prototype.slice为什么能将类数组对象转为真正的数组？

    在官方的解释中,如[mdn] The slice() method returns a shallow copy of a portion of an array into a new array o ...

  2. git<commit和分支>

    commit: 在执行提交命令git commit之前,一定要git add要修改的文件,这样才能将更改的内容更新到本地. 在Git 中提交时,会保存一个提交(commit)对象,它包含一个指向暂存内 ...

  3. D. Petya and Array 树状数组

    题意: 给出一个数组,元素有正有负有0,问其区间和小于 t 的子区间的个数. sum[ r ]-sum[ l-1 ]<t,其中sum是a的前缀和. 实现的方法就是从前往后对于每一个sum[ i ...

  4. BP神经网络人口预测程序（matlab实现）

    自己测试人口预测的matlab实现: x=[54167    55196    56300    57482    58796    60266    61465    62828    64653  ...

  5. svnsync备份

    参考:https://www.cnblogs.com/zz0412/p/svnsync.html https://blog.csdn.net/windone0109/article/details/4 ...

  6. Django中@login_required用法简介

    我们在网站开发过程中,经常会遇到这样的需求: 用户登陆系统才可以访问某些页面 如果用户没有登陆而直接访问就会跳转到登陆界面,而不能访问其他页面. 用户在跳转的登陆界面中完成登陆后,自动访问跳转到之前访 ...

  7. js计时器方法的使用

    js中计时器重要使用window.setInterval()方法和window.setTimeout()方法, 其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.se ...

  8. [洛谷P4491] [HAOI2018]染色

    洛谷题目链接:[HAOI2018]染色 题目背景 HAOI2018 Round2 第二题 题目描述 为了报答小 C 的苹果, 小 G 打算送给热爱美术的小 C 一块画布, 这块画布可 以抽象为一个长度 ...

  9. Java获取精确到秒的时间戳

    1.时间戳简介: 时间戳的定义:通常是一个字符序列,唯一地标识某一刻的时间.数字时间戳技术是数字签名技术一种变种的应用.是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01 ...

  10. 超厉害的CSS3图片破碎爆炸效果！

    var fx  = { buffer : function(obj, cur, target, fnDo, fnEnd, fs){ if(!fs)fs=6; var now={}; var x=0; ...