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. Apache Kafka 快速入门

    概述 Apache Kafka是一个分布式发布-订阅消息系统和强大的队列,可以处理大量的数据,将消息从一个端点传递到另一个端点.Kafka适合离线和在线消息消费,Kafka消息保存在磁盘上,并在集群内 ...

  2. 1.3 java8新特性总结

    java8中重要的4个新特性: Lambda Stream Optional 日期时间API 接口方法(default和static方法,jdk9可定义private方法) 一.Lambda impo ...

  3. springMVC4(7)模型视图方法源代码综合分析

    在完整web开发中.springMVC主要充当了控制层的角色.它接受视图层的请求.获取视图层请求数据,再对数据进行业务逻辑处理.然后封装成视图层须要的模型数据,再将数据导向到jsp等视图界面. 在前面 ...

  4. 什么？又是404！趣图助你理解HTTP状态码~

    HTTP状态码(一):   注释: 301—永久移动.被请求的资源已被永久移动位置: 302—请求的资源现在临时从不同的 URI 响应请求: 305—使用代理.被请求的资源必须通过指定的代理才能被访问 ...

  5. SpringBoot2.0微信小程序支付多次回调问题

    SpringBoot2.0微信小程序支付多次回调问题 WxJava - 微信开发 Java SDK(开发工具包); 支持包括微信支付.开放平台.公众号.企业微信/企业号.小程序等微信功能的后端开发. ...

  6. VirtualBox虚拟机磁盘瘦身

    操作系统 : windows7_x64 VirtualBox 版本 : 4.3.28 原理: 使用0填充虚拟系统磁盘,然后删除填充文件,再使用VBoxManage进行压缩. Linux系统磁盘瘦身 一 ...

  7. 关于bazel使用笔记

    当我们在build一个文件时,需要另外的放置cache时,我们需要: bazel --output_user_root=/path/to/directory build //foo:bar  

  8. golang编译库文件方式

    // as c-shared library $ go build -buildmode=c-shared -o nautilus.a nautilus.go // as c-archive $ go ...

  9. (原创)Rocketmq分布式消息队列的部署与监控

    -------------------------------------------------------------------------------------------- 一.Rocke ...

  10. redis学习 （key）键，Python操作redis 键 （二）

    # -*- coding: utf-8 -*- import redis #这个redis 连接不能用,请根据自己的需要修改 r =redis.Redis(host=") 1. delete ...