http://yisibl.github.io/cubic-bezier/#.17,.67,.94,.53

前言

在了解 cubic-bezier 之前，你需要对 CSS3 中的动画效果有所认识，它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。

本体

简介

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>

我们可以在浏览器中看到，当鼠标移到元素上时，元素开始向右移动，开始比较慢，之后则比较快，移开时按原曲线回到原点。

在例子中，当我们不为 transition 添加 cubic-bezier 或是其他 timing-function 时，默认的速度曲线是 ease，此时的速度曲线是：

 
 

那么让我们在代码中加入 cubic-bezier(.17, .86, .73, .14)：

...

.animation {

  ...

  -webkit-transition:  all 2s cubic-bezier(.17, .86, .73, .14);

       -o-transition:  all 2s cubic-bezier(.17, .86, .73, .14);

          transition:  all 2s cubic-bezier(.17, .86, .73, .14);

}

...

再刷新页面观察效果，会看到动画在执行过程中有一段很缓慢的移动，前后的速度相似，此时的运动曲线是：

 
 

几个常用的固定值对应的 cubic-bezier 值以及速度曲线

  1. ease：cubic-bezier(.25, .1, .25, 1)

     
     

  2. liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)

     
     

  3. ease-in：cubic-bezier(.42, 0, 1, 1)

     
     

  4. ease-out：cubic-bezier(0, 0, .58, 1)

     
     

  5. ease-in-out：cubic-bezier(.42, 0, .58, 1)

     
     

  6. In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55)

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

css3贝塞尔曲线的更多相关文章

  1. css3贝塞尔曲线过渡动画速率——transition-timing-function:cubic-bezier(n,n,n,n)

    css3过渡动画速率用到的是三阶贝塞尔曲线,曲线有四个点,p0,p1,p2,p3 有几个属性: linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). ...

  2. CSS3 贝塞尔曲线实现

    cubic-bezier 曲线是 css3 动画的一个重要基石.另一个为 steps (ease 等都是 cubic-bezier 的特殊形式),css3 中的 cubic_bezier 曲线限制了首 ...

  3. cubic-bezier贝塞尔曲线css3动画工具

    今天在一本叫<HTML5触摸界面设计与开发>上看到一个做弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速.是用cubic-bezier贝塞尔曲线来完成的.所以特地去学习了一下关 ...

  4. CSS3 三次贝塞尔曲线(cubic-bezier)

    例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...

  5. 贝塞尔曲线与CSS3动画、SVG和canvas的应用

    简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...

  6. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

  7. css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况

    当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...

  8. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

  9. 贝塞尔曲线（cubic bezier）

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

随机推荐

  1. 使用log4net生成日志文件

    (一)使用log4net生成日志文件   1.引入log4net.dll 1.1 Nuget安装 或 http://logging.apache.org/log4net/下载log4net的源代码,编 ...

  2. jvm理论-字节码指令

    Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的数字(称为操作码,Opcode)以及跟随其后的零至多个代表此操作所需参数(称为操作数,Operands)而构成. 基本数据类型 1.除了l ...

  3. 【PMP】关键路径法与关键链法

    通俗理解 关键路径法:把项目上的资源都事先全部分到每个活动上. 关键链法:每个活动不打富余,项目经理自己掌握资源,哪个成员执行过程中遇到困难,再给他单独分配资源. PMBOK定义 关键路径法:关键路径 ...

  4. Python操作redis学习系列之（集合）set，redis set详解 （六）

    # -*- coding: utf-8 -*- import redis r = redis.Redis(host=") 1. Sadd 命令将一个或多个成员元素加入到集合中,已经存在于集合 ...

  5. C#中，重新排列panel中的按钮

    https://www.cnblogs.com/hfzsjz/archive/2010/08/13/1799068.html void ArrangeButtons(Panel pn) { , y = ...

  6. ero-configuration Web Application Debugging with Xdebug and PhpStorm

    1. Install Xdebug To use Xdebug with PhpStorm for debugging PHP applications, you need to have a PHP ...

  7. <%: Html.DisplayNameFor与 <%: Html.DisplayFor的区别

    DisplayNameForModel只有在model定义了DisplayName时有用,简单说,DisplayNameFor是针对model里的"字段"别名,DisplayNam ...

  8. Paxos 实现日志复制同步（Basic Paxos）

    Paxos 实现日志复制同步 本篇文章以 John Ousterhout(斯坦福大学教授) 和 Diego Ongaro(斯坦福大学获得博士学位,Raft算法发明人) 在 Youtube 上的讲解视频 ...

  9. Smart Link

    Smart Link通过两个接口相互配合工作来实现功能.这样的一对接口组成了一个Smart Link组.为了区别一个Smart Link组中的两个接口,我们将其中的一个叫做主接口,另一个叫做从接口.同 ...

  10. 使用 Postman 取得 Token 打另一隻 API

    使用 Postman 取得 Token 打另一隻 API Spring MVC token 统一校验和user 信息自动获取 使用token和SpringMVC来实现安全的RESTFul接口 spri ...