CSS cubic-bezier() 函数----贝赛尔曲线

CSS cubic-bezier() 函数的理解

系列文章目录

cubic-bezier()函数

---

---

前言

本文就介绍了CSS学习的基础内容之贝赛尔曲线。

---

简介

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。
其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。
你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。
在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 (x1,y1) 和 p2 (x2,y2) .
x的范围是(0,1), y的范围是没有限制的.

画图理解

p0,p3固定,p1和p2来控制速率的改变.

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

总结

今天学习了css的动画效果,感觉很有趣,比如心跳,星星闪烁. animation动画函数,还有keyframes规则.