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

2025/4/28 9:25:33 来源：https://blog.csdn.net/wuhen_n/article/details/147525529 浏览: 次关键词：CSS元素动画篇：基于当前位置的变换动画（一）

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

前言
位移效果类元素动画
- 水平抖动效果
- - 效果预览
  - 代码实现
- 垂直抖动效果
- - 效果预览
  - 代码实现
- 摇头动画效果
- - 效果预览
  - 代码实现
- 点头动画效果
- - 效果预览
  - 代码实现
结语

前言

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

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

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

位移效果类元素动画

水平抖动效果

水平抖动效果：通过元素水平方向上的来回快速抖动实现，其效果图如下所示：

效果预览

水平抖动

代码实现

<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><body><span class="shake-x">水平抖动</span>
</body>

垂直抖动效果

垂直抖动效果：通过元素垂直方向上的来回快速抖动实现，其效果图如下所示：

效果预览

垂直抖动效果

代码实现

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

摇头动画效果

摇头动画效果：类型于水平动画效果，但抖动幅度比水平效果要轻，且动画细节更复杂，其效果图如下所示：

效果预览

摇头动画

代码实现

<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><body><span class="shake-head">摇头动画</span>
</body>

点头动画效果

点头动画效果：类型于垂直动画效果，但抖动幅度比垂直效果要轻，且只会向下位移，动画细节更复杂，其效果图如下所示：

效果预览

点头动画

代码实现

<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><body><span class="nodding">点头动画</span>
</body>