CSS元素动画篇：基于当前位置的变换动画（合集篇）
前言
CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。
基于当前位置的变换动画，我又将根据动画实现效果将其分为4类：
- 位移效果类：通过不明显的位移，实现元素动画效果，如：水平抖动、垂直抖动等。
- 旋转效果类：通过小幅度旋转，实现元素动画效果，如元素摇摆、摇晃等。
- 缩放效果类：通过缩放，实现元素动画效果，如脉冲效果、呼吸效果、心跳效果等。
- 透明度效果类：通过改变元素透明度，实现元素动画效果，如闪烁效果。
位移效果类元素动画
水平抖动效果
水平抖动效果：通过元素水平方向上的来回快速抖动实现，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平抖动</title>
<style>
/* 水平抖动效果 */
@keyframes shakeX {
/* 元素开始和结束位置不变 */
0%, 100% {
transform: translateX(0);
}
/* 左右交替动画 */
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.shake-x {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.shake-x:hover {
animation: shakeX 1s 1;
}
</style>
</head>
<body>
<span class="shake-x">水平抖动</span>
</body>
</html>垂直抖动效果
垂直抖动效果：通过元素垂直方向上的来回快速抖动实现，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直抖动</title>
<style>
/* 垂直抖动效果 */
@keyframes shakeY {
/* 元素开始和结束位置不变 */
0%, 100% {
transform: translateY(0);
}
/* 上下交替动画 */
10%, 30%, 50%, 70%, 90% {
transform: translateY(-10px);
}
20%, 40%, 60%, 80% {
transform: translateY(10px);
}
}
.shake-y {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.shake-y:hover {
animation: shakeY 1s 1;
}
</style>
</head>
<body>
<span class="shake-y">垂直抖动</span>
</body>
</html>摇头动画效果
摇头动画效果：类型于水平动画效果，但抖动幅度比水平效果要轻，且动画细节更复杂，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>摇头动画</title>
<style>
/* 摇头动画效果 */
@keyframes shakeX {
/* 元素开始和结束位置不变 */
0%, 100% { transform: translateX(0);}
/* 动画细节 */
13% { transform: translateX(-6px) rotateY(-9deg); }
29% { transform: translateX(5px) rotateY(7deg); }
63% { transform: translateX(-3px) rotateY(-5deg); }
97% { transform: translateX(2px) rotateY(3deg); }
}
.shake-head {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.shake-head:hover {
animation: shakeX 0.5s 1;
}
</style>
</head>
<body>
<span class="shake-head">摇头动画</span>
</body>
</html>点头动画效果
点头动画效果：类型于垂直动画效果，但抖动幅度比垂直效果要轻，且只会向下位移，动画细节更复杂，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点头效果动画</title>
<style>
@keyframes nod {
/* 元素开始和结束位置不变 */
0%, 100% { transform: translateY(0); }
/* 向下位移 */
50% { transform: translateY(10px); }
}
.nodding {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.nodding:hover {
animation: nod 1s 2 ease-in-out;
}
</style>
</head>
<body>
<span class="nodding">点头动画</span>
</body>
</html>旋转效果类元素动画
摇摆动画效果
摇摆动画效果：通过旋转元素模拟钟摆的摇摆效果，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>摇摆动画</title>
<style>
/* 摇摆动画效果 */
@keyframes swing {
/* 元素开始和结束位置不变 */
0%,100% {
transform: rotate(0deg);
}
/* 左右交替旋转，旋转角度逐渐变小 */
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
}
.swing {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.swing:hover {
animation: swing 1s 1 ease-in-out;
}
</style>
</head>
<body>
<span class="swing">摇摆动画</span>
</body>
</html>摇晃动画效果
摇晃动画效果：通过位移和旋转组合，模拟摇晃效果，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>摇晃动画</title>
<style>
/* 摇晃动画效果 */
@keyframes wobble {
/* 元素开始和结束位置不变 */
0%, 100% {
transform: translate(0, 0);
}
/* 左右交替旋转，角度逐渐变小 */
15% {
transform: translateX(-25%) rotateX( -5deg);
}
30% {
transform: translateX(20%) rotateX( 3deg);
}
45% {
transform: translateX(-15%) rotateX(-3deg);
}
60% {
transform: translateX(10%) rotateX( 2deg);
}
75% {
transform: translateX(-5%) rotateX(-1deg);
}
}
.wobble {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.wobble:hover {
animation: wobble 1s 1 ease-in-out;
}
</style>
</head>
<body>
<span class="wobble">摇晃动画</span>
</body>
</html>螺旋旋转
螺旋旋转效果：元素360°旋转并缩放，创建出动态的螺旋运动，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>螺旋旋转</title>
<style>
/* 螺旋旋转效果 */
@keyframes spiral {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}
.spiral {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.spiral:hover {
animation: spiral 2s linear 1;
}
</style>
</head>
<body>
<span class="spiral">螺旋旋转</span>
</body>
</html>缩放效果类元素动画
脉冲动画效果
脉冲动画效果：通过元素放大和缩小的效果，从而产生脉冲的感觉，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脉冲动画</title>
<style>
/* 脉冲动画 */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.pulse {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.pulse:hover {
animation: pulse 1s linear 1;
}
</style>
</head>
<body>
<span class="pulse">脉冲动画</span>
</body>
</html>橡皮筋动画效果
橡皮筋动画：通过元素伸张和缩小，让元素看起来像被拉长后迅速恢复原状，从而产生橡皮筋拉伸回弹的感觉，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>橡皮筋动画</title>
<style>
/* 橡皮筋效果 */
@keyframes rubberBand {
0%, 100% {
transform: scale(1, 1);
}
30% {
transform: scale(1.25, 0.75);
}
40% {
transform: scale(0.75, 1.25);
}
50% {
transform: scale(1.15, 0.85);
}
65% {
transform: scale(0.95, 1.05);
}
75% {
transform: scale(1.05, 0.95);
}
}
.rubber-band {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.rubber-band:hover {
animation: rubberBand 1s 1;
}
</style>
</head>
<body>
<span class="rubber-band">橡皮筋动画</span>
</body>
</html>果冻动画效果
果冻动画效果：果冻效果和橡皮筋效果类似，只是在橡皮筋的动画基础上增加了轻微旋转，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>果冻动画</title>
<style>
/* 果冻效果 */
@keyframes jello {
0%, 100% {
transform: skewX(0deg) skewY(0deg);
}
15% {
transform: skewX(-25deg) skewY(-25deg);
}
30% {
transform: skewX(20deg) skewY(20deg);
}
45% {
transform: skewX(-15deg) skewY(-15deg);
}
60% {
transform: skewX(10deg) skewY(10deg);
}
75% {
transform: skewX(-5deg) skewY(-5deg);
}
}
.jello {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.jello:hover {
animation: jello 1s 1;
}
</style>
</head>
<body>
<span class="jello">果冻动画</span>
</body>
</html>欢呼动画效果
欢呼动画效果：通过元素放大和轻微抖动，实现简单的欢呼效果，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢呼动画</title>
<style>
/* 欢呼动画 */
@keyframes tada {
0%, 100% {
transform: scale(1) rotate(0deg);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
}
.tada {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.tada:hover {
animation: tada 1s 1;
}
</style>
</head>
<body>
<span class="tada">欢呼动画</span>
</body>
</html>心跳动画效果
心跳动画效果：心跳动画效果和脉冲类似，只是动画细节比脉冲更赋值，动画帧更多，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心跳动画</title>
<style>
/* 心跳动画 */
@keyframes heartBeat {
0%, 100% {
transform: scale(1);
}
25%, 75% {
transform: scale(1.1);
}
50% {
transform: scale(0.9);
}
}
.heart-beat {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.heart-beat:hover {
animation: heartBeat 1s 1;
}
</style>
</head>
<body>
<span class="heart-beat">心跳动画</span>
</body>
</html>透明效果类元素动画
闪烁动画效果
闪烁动画效果：通过控制元素周期性的显示和隐藏，模拟闪烁的效果，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闪烁动画</title>
<style>
/* 闪烁动画 */
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.blink {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.blink:hover {
animation: blink 1s 1;
}
</style>
</head>
<body>
<span class="blink">闪烁动画</span>
</body>
</html>淡入动画效果
淡入动画效果：元素由完全透明（不可见）变成完全不透明（可见）的过程，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淡入动画</title>
<style>
/* 淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.fade-in:hover {
animation: fadeIn 2s ease-in-out;
}
</style>
</head>
<body>
<span class="fade-in">淡入动画</span>
</body>
</html>淡出动画效果
淡出动画效果：元素由完全不透明（可见）变成完全透明（不可见）的过程，其效果图如下所示：
效果预览
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淡出动画</title>
<style>
/* 淡出动画 */
@keyframes fadeOut {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-out {
display: inline-block;
height: 100px;
font-size: 100px;
font-weight: bold;
}
.fade-out:hover {
animation: fadeOut 2s ease-in-out;
}
</style>
</head>
<body>
<span class="fade-out">淡出动画</span>
</body>
</html>结语
本文主要从位移效果类、旋转效果类、缩放效果类、透明度效果类四个角度，介绍了日常开发中常见的几种的基于当前位置的元素变换动画，相关源码我放在了 CSS 元素动画篇：基于当前位置的变换动画完整源码及详解 中，欢迎大家下载评论！你还知道哪些基于当前位置的元素变换动画？欢迎在评论区留言分享！