CSS左右摆动动效
要实现一个简单的CSS左右摆动动效，可以使用@keyframes规则来定义动画，并使用animation属性应用到元素上。以下是一个实现左右摆动效果的例子：
/* 定义动画 */
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
/* 应用动画 */
.slider {
animation: slide 1s infinite alternate;
}
<!-- 应用动画的HTML元素 -->
<div class="slider">我将会左右摆动！</div>在这个例子中，.slider类定义了一个动画，名为slide，它将元素从当前位置向右移动100像素，动画持续时间为1秒，并且设置为无限次数循环（infinite），且每次动画完成后都会反向播放（alternate）。
评论已关闭