实用的 CSS — 贝塞尔曲线(cubic-bezier)
欢迎移步我的博客阅读:《实用的 CSS — 贝塞尔曲线(cubic-bezier)》
前言
在了解 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
值以及速度曲线
ease
:cubic-bezier(.25, .1, .25, 1)liner
:cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)ease-in
:cubic-bezier(.42, 0, 1, 1)ease-out
:cubic-bezier(0, 0, .58, 1)ease-in-out
:cubic-bezier(.42, 0, .58, 1)In Out . Back(来回的缓冲效果):cubic-bezier(0.68, -0.55, 0.27, 1.55)
效果参考
文章所提到的动画效果可以在下面站点中看到,当然你也可以大胆尝试:
参考
本文转载于:猿2048实用的 CSS — 贝塞尔曲线(cubic-bezier)
实用的 CSS — 贝塞尔曲线(cubic-bezier)的更多相关文章
- 计算机图形学:贝塞尔曲线(Bezier Curve)
计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.
- css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- CSS — 贝塞尔曲线(cubic-bezier)
cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线的函数,规定是 cubic-bezier(<x1>, <y1>, <x2>, & ...
- 贝塞尔曲线(cubic bezier)
对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下: transition语法:transition:<transition-property> ...
- 再谈CSS动画 - 说点不知道的(一)贝塞尔曲线
今天重新翻看<CSS 揭秘>"过渡与动画"一章,并把该章代码重新敲了一遍,代码托管在我的Github,在此总结一些心得. 动画的奥秘 在网页中添加动画的目的是让用户有更 ...
- CSS总结六:动画(一)ransition:过渡、animation:动画、贝塞尔曲线、step值的应用
transition-property transition-duration transition-timing-function transition-delay animation-name a ...
- 深度掌握SVG路径path的贝塞尔曲线指令
一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...
- iOS开发 贝塞尔曲线
iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00 博客园-所有随笔区 原文 http://www.cnblogs.com/moyunmo/p/ ...
- iOS开发 贝塞尔曲线UIBezierPath
最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...
随机推荐
- anaconda及jupyter notebook的了解及使用方法(1)
今日内容 anaconda软件使用 jupyter notebook基本使用及快捷键 numpy anaconda软件使用 1.进入anaconda主页点击jupyter启动即可 呼起一个jupyte ...
- if 、whitch、for、while
if 用于过程的判断 whitch用于值得判断 if { } else if { } else if //当此前的过程满足条件时,程序便不再判断其他过程,但是if{}if{}这样的写法程序会将每个过 ...
- LeetCode-009-回文数
回文数 题目描述:给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数.例如,121 是回文,而 1 ...
- 微信小程序书简易支付
这里结合了上一篇的手机号登录接下来的实现功能 https://www.cnblogs.com/xiaoyantongxue/p/15472915.html 登录后进入课程选择页面 1:数据库填入数据 ...
- 在centos7下安装gitlab-runner
1.下载安装包 wget -O /usr/local/bin/gitlab-runner https://gitlab-ci-multi-runner-downloads.s3.amazonaws.c ...
- windows2008R2重建索引
windows索引服务 索引服务是一项系统服务(Indexing Service),使用文档筛选器读取整个文档,并提取文档和属性传递给索引程序,这个过程称为"索引".索引服务可以从 ...
- Mysql数据库索引的使用
1.索引的使用 查询 表的锁show index from qk_auth_employee 2.走索引 EXPLAIN SELECT * from qk_auth_employee where Da ...
- SQL存储过程的学习01
虽工作多年,但是sql的存储过程一致都没怎么用过,今天来按照博客https://www.cnblogs.com/applelife/p/11016674.html来学习一下(我使用postgre sq ...
- ES6-ES12部分简单知识点总结,希望对大家有用~
ES6-ES12简单知识点总结 1.ES6相关知识点 1.1.对象字面量的增强 ES6中对对象字面量的写法进行了增强,主要包含以下三个方面的增强: 属性的简写:当给对象设置属性时,如果希望变量名和属性 ...
- BUAA_DS_聊聊链表
幸福穿着节日的盛装欢迎你. --威廉•莎士比亚<罗密欧与朱丽叶> 1. 说在前面 大家在学数组的时候小脑瓜里有没有这样的疑惑:为什么数组必须是定长的?为什么数组开太长会编译错误?数组越界为 ...