1. 缓动效果
给过渡和动画加上缓动效果（比如具有回弹效果的过渡过程）
回弹效果是指当一个过渡达到最终值时，往回倒一点，然后再次回到最终值，如此往复一次或多次，并逐渐收敛，最终稳定在最终值。
假设要用一个元素来模拟一个下落的小球，我们会把 transform 属性从 none 过渡到 translateY(350px) 来模拟这个下落过程。
1.1 弹跳动画
CSS 提供了一个 cubic-bezier()函数，允许我们指定自定义的调速函数。
- 它接受四个参数，分别代表两个控制锚点的坐标值，我们通过这两个控制锚点来指定想要的贝塞尔曲线。
- 语法形式是这样的：cubic-bezier(x1, y1, x2, y2)，其中 (x1, y1) 表示第一个控制锚点的坐标，而 (x2, y2) 是第二个。
- 曲线片断的两个端点分别固定在(0,0) 和 (1,1)，前者是整个过渡的起点（时间进度为零，动画进度为零），后者是终点（时间进度为 100%，动画进度为 100%）
<!DOCTYPE html>
<html><head><style> @keyframes bounce {60%, 80%, to {transform: translateY(400px);animation-timing-function: ease;}70% {transform: translateY(300px);}90% {transform: translateY(360px);}}.ball {width: 0;height: 0;padding: 1.5em;border-radius: 50%;margin: auto;background: red radial-gradient(at 30% 30%, #fdd, red);animation: bounce 2s cubic-bezier(0.1, 0.25, 1, 0.25) forwards;}body {background: linear-gradient(skyblue, white 450px, yellowgreen 0);min-height: 100vh;} </style></head><body><div class="ball"></div></body>
</html>
1.2 弹性过渡
假设有一个文本输入框，每当它被聚焦时，都需要展示一个提示框。这个提示框用来向用户提供帮助信息，比如字段值的正确格式等
CSS 属性
transform-origin更改一个元素变形的原点。
<!DOCTYPE html>
<html><head><style> input:not(:focus) + .callout:not(:hover) {
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
