CSS元素动画篇：基于当前位置的变换动画（三）

基于当前位置的变换动画（三）

前言
缩放效果类元素动画
- 脉冲动画效果
- - 效果预览
  - 代码实现
- 橡皮筋动画效果
- - 效果预览
  - 代码实现
- 果冻动画效果
- - 效果预览
  - 代码实现
- 欢呼动画效果
- - 效果预览
  - 代码实现
- 心跳动画效果
- - 效果预览
  - 代码实现
结语

前言

CSS元素动画一般分为两种：一种是元素基于当前位置的变换动画，通过不明显的位移、缩放等方式，实现动画效果，如弹跳、闪烁、抖动等；另一种是元素基于页面位置的变换动画，通过位移、旋转等方式，实现动画效果，如飞入/飞出等。
基于当前位置的变换动画，我又将根据动画实现效果将其分为4类：

位移效果类：通过不明显的位移，实现元素动画效果，如：水平抖动、垂直抖动等。
旋转效果类：通过小幅度旋转，实现元素动画效果，如元素摇摆、摇晃等。
缩放效果类：通过缩放，实现元素动画效果，如脉冲效果、呼吸效果、心跳效果等。
透明度效果类：通过改变元素透明度，实现元素动画效果，如闪烁效果。

本文主要介绍缩放效果类的相关元素动画效果与代码实现。

缩放效果类元素动画

脉冲动画效果

脉冲动画效果：通过元素放大和缩小的效果，从而产生脉冲的感觉，其效果图如下所示：

效果预览

脉冲动画

代码实现

<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>

橡皮筋动画效果

橡皮筋动画：通过元素伸张和缩小，让元素看起来像被拉长后迅速恢复原状，从而产生橡皮筋拉伸回弹的感觉，其效果图如下所示：

效果预览

橡皮筋动画

代码实现

<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>

果冻动画效果

果冻动画效果：果冻效果和橡皮筋效果类似，只是在橡皮筋的动画基础上增加了轻微旋转，其效果图如下所示：

效果预览

果冻动画

代码实现

<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>

欢呼动画效果

欢呼动画效果：通过元素放大和轻微抖动，实现简单的欢呼效果，其效果图如下所示：

效果预览

欢呼动画

代码实现

<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>

心跳动画效果

心跳动画效果：心跳动画效果和脉冲类似，只是动画细节比脉冲更赋值，动画帧更多，其效果图如下所示：

效果预览

心跳动画

代码实现

<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>