[分享]css3摆动动画

CSS3中的摆动动画在网页设计中使用越来越广泛，它可以让网页元素在运动中呈现出有趣的效果。下面我们就来看看如何使用CSS3来实现摆动动画。/ CSS代码 / .swing { animation: s...

CSS3中的摆动动画在网页设计中使用越来越广泛，它可以让网页元素在运动中呈现出有趣的效果。下面我们就来看看如何使用CSS3来实现摆动动画。

/* CSS代码 */
.swing {
    animation: swing 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(0deg);
    }
} 

以上的代码描述了如何设置一个名为swing的CSS样式，使用animation属性来定义摆动动画，在2秒钟内完成从始至终，以Ease-in-out方式呈现。使用infinite来无限循环播放动画。同时设定了摆动元素的旋转中心为中心。

接下来使用@keyframes关键字来定义摆动动画的关键帧：0%表示元素未开始运动时的状态，50%表示元素开始运动的状态，100%表示运动完成时的状态。使用transform属性，以角度的形式旋转元素实现摆动动画。

在HTML中，我们可以通过给需要实现摆动动画的元素添加.swing类名来使用上述的样式。例如，将一个图片元素实现摆动动画可以这样写：

<img src="picture.jpg" class="swing"> 

通过使用CSS3定义摆动动画，我们可以让页面活泼有趣并增加页面趣味性，同时提升用户体验。