例子：transition:all 1s cubic-bezier(.21,.2,.65,.1)

最近在看animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。

CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为

cubic-bezier (x1,y1,x2,y2)

原理:
看一下什么是三次贝塞尔曲线，以及这几个参数的含义：

贝塞尔曲线坐标系

贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。

参数点

分别用A,B,C,D表示这四个点，其中起始点固定值为A(0,0),终止点固定为D(1,1)剩下的中间点B(x1,y1),C(x2,y2)也就是所要动态操控的两个点了,对应cubic-bezier (x1,y1,x2,y2)中的四个参数,通过改变B,C两点的坐标值来动态生成一条贝塞尔曲线表示动画中的速度变化。
规则
x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。
CSS3提供的几个预设速度：

ease 对应自定义cubic-bezier(.,.,.,),效果为先慢后快再慢；

ease效果

linear 对应自定义cubic-bezier(,,,)，效果为匀速直线；

linear效果

ease-in 对应自定义cubic-bezier(.,,,),效果为先慢后快；

ease-in效果

ease-out 对应自定义cubic-bezier(,,.,),效果为先快后慢；

ease-out效果

 
ease-in-out 对应自定义cubic-bezier(.,,.,),效果为先慢后快再慢。

ease-in-out效果

 

用法

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>demo</title>

<style>

.linear {

　　width: 50px;

　　height: 50px;

　　background-color: #ff0000;

　　-webkit-transition: all 2s linear;

　　-moz-transition: all 2s linear;

　　-o-transition: all 2s linear;

　　transition: all 2s linear;

}

.linear:hover {

　　-webkit-transform: translateX(100px);

　　-moz-transform: translateX(100px);

　　-o-transform: translateX(100px);

　　transform: translateX(100px);

}

.custom {

　　width: 50px;

　　height: 50px;

　　background-color: #00ff00;

　　-webkit-transition: all 2s cubic-bezier(.,-0.25,.,1.31);

　　-moz-transition: all 2s cubic-bezier(.,-0.25,.,1.31);

　　-o-transition: all 2s cubic-bezier(.,-0.25,.,1.31);

　　transition: all 2s cubic-bezier(.,-0.25,.,1.31);

}

.custom:hover {

　　-webkit-transform: translateX(200px);

　　-moz-transform: translateX(200px);

　　-o-transform: translateX(200px);

　　transform: translateX(200px);

}

</style>

</head>

<body>

　　<div class="linear"></div>

　　<div class="custom"></div>

</body>

</html>

demo中红色方块采用预设速度liner呈现匀速直线运动，绿色方块采用自定义cubic-bezier(.94,-0.25,.32,1.31),呈现蓄力加速效果。
bezier曲线图：

CSS3 三次贝塞尔曲线(cubic-bezier)的更多相关文章

  1. 二次、三次贝塞尔曲线demo(演示+获取坐标点)

    二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以 ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

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

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

  4. 求帮助 html5三次贝塞尔曲线问题

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>can ...

  5. canvas 绘制三次贝塞尔曲线

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

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

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

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

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

  8. iOS开发 贝塞尔曲线

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

  9. iOS开发 贝塞尔曲线UIBezierPath

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

随机推荐

  1. GIT-Bonobo.Git.Server的使用

    GIT-Bonobo.Git.Server的使用 登录 (默认用户:admin/admin) 创建用户: 创建团队,勾选用户 创建新库 保存完成!

  2. [物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.2 媒质交界面上的条件

    通过 Maxwell 方程组的积分形式易在交界面上各量应满足交界面条件: $$\beex \bea \sez{{\bf D}}\cdot{\bf n}=\omega_f,&\sex{\omeg ...

  3. Java CAS 比较并且更换值

    原文:Java中CAS详解 作者:jayxu无捷之径 在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会 ...

  4. js 计算当年还剩多少时间的倒数计时 javascript 原理解析【复制到编辑器查看推荐】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue构造函数（根实例化时和组件实例对象选项）参数：选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  6. LeetCode第十题-正则表达式匹配

    Regular Expression Matching 问题简介:给定字符串,给定匹配模式,判断字符串是否满足匹配模式 问题详解:一共有两种特殊模式: ‘.’ 匹配任何单个字符 ‘*’ 匹配前面元素的 ...

  7. C#学习笔记-XML的读写（一）

    需要解析的配置XML <?xml version="1.0" encoding="utf-8" ?> <configurations> ...

  8. Centos7.5 安装VirtualBox增强工具

    一.安装 1.自带tools:  选择VirtualBox工具栏 => 设备 => 安装增强功能 2.挂载光驱 3.进入光驱目录,执行(一定要用root权限执行) ①安装gcc yum i ...

  9. Linux下安装VMware Tools（使虚拟机支持文件拖拽）

    如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...

  10. [ZJOI2008]树的统计-树链剖分

    #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+5; #define mid ((l+r)>> ...