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

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

前言
旋转效果类元素动画
- 摇摆动画效果
- - 效果预览
  - 代码实现
- 摇晃动画效果
- - 效果预览
  - 代码实现
- 螺旋旋转
- - 效果预览
  - 代码实现
结语

前言

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

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

在上一篇文章中，我们介绍了位移效果类的相关元素动画效果与代码实现，本篇文章将介绍旋转效果类的相关元素动画效果与代码实现。

旋转效果类元素动画

摇摆动画效果

摇摆动画效果：通过旋转元素模拟钟摆的摇摆效果，其效果图如下所示：

效果预览

摇摆动画

代码实现

<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><body><span class="swing">摇摆动画</span>
</body>

摇晃动画效果

摇晃动画效果：通过位移和旋转组合，模拟摇晃效果，其效果图如下所示：

效果预览

摇摆动画

代码实现

<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><body><span class="wobble">摇晃动画</span>
</body>

螺旋旋转

螺旋旋转效果：元素360°旋转并缩放，创建出动态的螺旋运动，其效果图如下所示：

效果预览

螺旋旋转

代码实现

<style>
/* 螺旋旋转效果 */
@keyframes spiral {0% {transform: rotate(0deg) scale(1);}50% {transform: rotate(180deg) scale(0.5);}100% {transform: rotate(360deg) scale(1);}
}
.spiral {padding: 100px 200px;display: inline-block;height: 100px;font-size: 100px;font-weight: bold;
}
.spiral:hover {animation: spiral 2s linear 1;
}
</style><body><span class="spiral">螺旋旋转</span>
</body>