css3动画 左右移动

CSS3 动画是指可以让元素进行动态变化的效果，其中包含多种动画效果，如渐变、旋转等。

本文重点介绍左右移动的动画效果，以下代码实现左右移动效果。

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: move 1s infinite alternate;
}
@keyframes move {
from {
    left: 0;
}
to {
    left: calc(100% - 100px);
}
}
    

在上述代码中，我们设置了一个盒子的基本样式，其中使用了定位让其处于相对定位。同时，我们使用了 animation 属性来实现动画效果。

在 keyframes 属性中，我们通过 from 和 to 控制盒子的位置变化。具体来说，我们设置 left 属性从 0 变化到 calc(100% - 100px)，即让盒子从左端到右端移动。

最后，我们设置 animation 中的 alternate 属性来让元素来回反复地移动，同时使用 infinite 让移动效果无限循环。

通过以上代码，我们可以成功地实现一个盒子左右移动的动画效果。

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