如何创建无限循环的 CSS3 动画？-css教程-PHP中文网

如何创建无限循环的 CSS3 动画？

Barbara Streisand

发布： 2024-11-17 14:23:02

原创

471 人浏览过

How to Create Infinitely Looping CSS3 Animations?

无限循环 CSS3 动画

在追求创建迷人的动画时，您可能会遇到让它们永远无缝循环的愿望。虽然在动画周期结束时重新加载页面似乎是一个简单的解决方案，但它可能不太理想。幸运的是，有一种优雅的方法可以使用纯 CSS3 来实现此目的。

在您提供的代码中，每个图像都会在设定的持续时间内淡入和淡出。为了使这个动画无限循环，我们需要修改animation-iteration-count属性。此属性指定动画应重复的次数。

animation-iteration-count: infinite;

登录后复制

通过将animation-iteration-count设置为无限，动画将无限期地重复，确保您的图像连续淡入和淡出。

这是添加了属性的更新后的 CSS：

@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.photo1 {
    opacity: 0;
    animation: fadeinphoto 7s 1 infinite;
    -moz-animation: fadeinphoto 7s 1 infinite;
    -webkit-animation: fadeinphoto 7s 1 infinite;
    -o-animation: fadeinphoto 7s 1 infinite;
}

.photo2 {
    opacity: 0;
    animation: fadeinphoto 7s 5s infinite;
    -moz-animation: fadeinphoto 7s 5s infinite;
    -webkit-animation: fadeinphoto 7s 5s infinite;
    -o-animation: fadeinphoto 7s 5s infinite;
}

.photo3 {
    opacity: 0;
    animation: fadeinphoto 7s 10s infinite;
    -moz-animation: fadeinphoto 7s 10s infinite;
    -webkit-animation: fadeinphoto 7s 10s infinite;
    -o-animation: fadeinphoto 7s 10s infinite;
}

.photo4 {
    opacity: 0;
    animation: fadeinphoto 7s 15s infinite;
    -moz-animation: fadeinphoto 7s 15s infinite;
    -webkit-animation: fadeinphoto 7s 15s infinite;
    -o-animation: fadeinphoto 7s 15s infinite;
}

.photo5 {
    opacity: 0;
    animation: fadeinphoto 7s 20s infinite;
    -moz-animation: fadeinphoto 7s 20s infinite;
    -webkit-animation: fadeinphoto 7s 20s infinite;
    -o-animation: fadeinphoto 7s 20s infinite;
}

登录后复制

现在，您的图像将无限期地淡入淡出，创建一个无缝且具有视觉吸引力的动画循环。

以上是如何创建无限循环的 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！