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. 【MAC】Mac下部分常用的小工具

    Homebrew: 官方介绍:The missing package manager for OS X(OS X 不可或缺的套件管理器) /usr/bin/ruby -e "$(curl - ...

  2. nrm管理npm源

    npm源:npm install命令下载需要依赖包的服务器地址,默认是 npm ---- https://registry.npmjs.org/ 而国外的源速度太慢,所以我们一般都用国内的淘宝源tao ...

  3. CentOS 7.5 安装KVM虚拟机(Linux)

    1.认识理解KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linu ...

  4. activiti自己定义流程之整合（四）：整合自己定义表单部署流程定义

    综合前几篇博文内容.我想在整合这一部分中应该会有非常多模块会跳过不讲,就如自己定义表单的表单列表那一块,由于这些模块在整合的过程中都差点儿没有什么修改,再多讲也是反复无用功. 正由于如此,在创建了流程 ...

  5. 【iCore4 双核心板_uC/OS-II】例程二：任务的建立与删除

    一.实验说明: 本例程建立三个任务,通过任务寄存器来实现任务的建立与删除功能.红灯和绿灯同时以固定 频率闪烁,当任务寄存器为5时,删除绿灯闪烁的任务LED1,此时只有红灯闪烁,当任务寄存器的 值为10 ...

  6. vscode打造最佳的markdown编辑器

    参考:https://www.jianshu.com/p/18876655b452 在macos下也设置成功:

  7. Netty 学习笔记（1）通信原理

    前言 本文主要从 select 和 epoll 系统调用入手,来打开 Netty 的大门,从认识 Netty 的基础原理 —— I/O 多路复用模型开始.   Netty 的通信原理 Netty 底层 ...

  8. 解决java.lang.annotation.AnnotationFormatError: Invalid default: public abstract java.lang.Class org.robolectric.annotation.Config.application()

    Deleting the .gradle folder worked for me too. Odd. Guessing some high level caching going on somewh ...

  9. 关于FastJSON

    https://github.com/alibaba/fastjson/wiki/Quick-Start-CN FastJSON常见问题 FastJson和get方法的问题 使用SimplePrope ...

  10. Tcp Udp发送包的大小限制问题

    以太网(Ethernet)数据帧的长度必须在46-1500字节之间,这是由以太网的物理特性决定的.    这个1500字节被称为链路层的MTU(最大传输单元).    但这并不是指链路层的长度被限制在 ...