[分享]css写一个div循环动画

在CSS中，我们可以使用动画来增强我们的网站的视觉效果。在这篇文章中，我将教你如何用CSS写一个div循环动画。

.my-div {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
    animation: my-div-animation 2s linear infinite;
}

@keyframes my-div-animation {
    0% {
        left: 0;
    }
    50% {
        left: 50vw;
    }
    100% {
        left: 0;
    }
} 

如上所示，我们为一个div元素添加了一个名为my-div-animation的动画，该动画将在2秒钟内无限迭代。我们使用@keyframes指令定义了动画的详情。

在0%的时间点，我们让这个div元素的left值为0，也就是它在屏幕最左边。在50%的时间点，我们为这个div元素的left值设置了一个值为50vw，这意味着它将在屏幕正中间。在100%的时间点，我们再次将这个div元素的left值设置为0，从而导致它回到了屏幕的最左边。

这个动画将重复无限次运行，始终在最左边、最中间和最右边之间移动。你可以根据需要更改动画的持续时间和运动函数。

这就是CSS中创建循环动画的基础知识，通过制定关键帧和声明动画即可实现。尝试自己制作一些循环动画并将其应用到自己的项目中吧！