css3 来回动画

CSS3 来回动画是一种常见的网页动效，它可以让页面元素在一定时间内循环来回移动。下面我们来看一下如何使用 CSS3 实现这样的动画效果。

.box{
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: move-back-and-forth 2s ease-in-out infinite;
}
@keyframes move-back-and-forth{
0%{
    transform: translateX(0);
}
50%{
    transform: translateX(50px);
}
100%{
    transform: translateX(0);
}
}
    

在上面的代码中，我们定义了一个类名为.box 的元素，并对它进行了样式的设置，包括宽高和背景颜色。

接着，我们使用了 CSS3 中的 animation 属性来定义了一个名为 move-back-and-forth 的动画效果，用于让 .box 元素来回滑动。其中，参数值 2s 设置了动画效果的周期为两秒钟，参数值 ease-in-out 则表示动画效果采用缓进缓出的方式，参数值 infinite 则表示动画效果应该无限循环。

而在 @keyframes 规则中，我们通过定义从初始状态（0%）到中间状态（50%）到最终状态（100%）的不同样式来完成了动画过程，具体来说，我们使用 transform 属性和 translateX 函数来让 .box 元素在水平方向上运动。

这样，我们就成功地实现了一个简单的 CSS3 来回动画。需要注意的是，为了确保动画效果在不同浏览器中都能正常运行，我们需要添加相应的浏览器前缀。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！