基于当前位置的变换动画（三）
前言
CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。
基于当前位置的变换动画，我又将根据动画实现效果将其分为4类：
- 位移效果类：通过不明显的位移，实现元素动画效果，如：水平抖动、垂直抖动等。
- 旋转效果类：通过小幅度旋转，实现元素动画效果，如元素摇摆、摇晃等。
- 缩放效果类：通过缩放，实现元素动画效果，如脉冲效果、呼吸效果、心跳效果等。
- 透明度效果类：通过改变元素透明度，实现元素动画效果，如闪烁效果。
本文主要介绍缩放效果类的相关元素动画效果与代码实现。
缩放效果类元素动画
脉冲动画效果
脉冲动画效果：通过元素放大和缩小的效果，从而产生脉冲的感觉，其效果图如下所示：
效果预览
代码实现
html
<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>
<body>
<span class="pulse">脉冲动画</span>
</body>橡皮筋动画效果
橡皮筋动画：通过元素伸张和缩小，让元素看起来像被拉长后迅速恢复原状，从而产生橡皮筋拉伸回弹的感觉，其效果图如下所示：
效果预览
代码实现
html
<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>
<body>
<span class="rubber-band">橡皮筋动画</span>
</body>果冻动画效果
果冻动画效果：果冻效果和橡皮筋效果类似，只是在橡皮筋的动画基础上增加了轻微旋转，其效果图如下所示：
效果预览
代码实现
html
<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>
<body>
<span class="jello">果冻动画</span>
</body>欢呼动画效果
欢呼动画效果：通过元素放大和轻微抖动，实现简单的欢呼效果，其效果图如下所示：
效果预览
代码实现
html
<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>
<body>
<span class="tada">欢呼动画</span>
</body>心跳动画效果
心跳动画效果：心跳动画效果和脉冲类似，只是动画细节比脉冲更赋值，动画帧更多，其效果图如下所示：
效果预览
代码实现
html
<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>
<body>
<span class="heart-beat">心跳动画</span>
</body>结语
本文主要介绍了几种常见的缩放效果类元素动画，你还知道哪些缩放效果类元素动画？欢迎在评论区留言分享！