如何在 CSS3 中创建连续循环动画，其中第一个图像随着最后一个图像淡出而无缝淡入？-css教程-PHP中文网

如何在 CSS3 中创建连续循环动画，其中第一个图像随着最后一个图像淡出而无缝淡入？

Mary-Kate Olsen

发布： 2024-11-19 10:11:02

原创

557 人浏览过

How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?

在 CSS3 中创建无缝循环动画

问题：

您想要创建一个无限动画序列，其中第一个动画序列当最后一个图像淡出时，图像会淡入。

提供的代码：

提供的 HTML 和 CSS 代码建立了一系列按顺序淡入的五个图像，但是到达最后一张图像时，页面将重新加载。

使用animation-iteration-count的解决方案：

要实现无限循环而不重新加载页面，请添加以下属性动画规则：

animation-iteration-count: infinite;

登录后复制

此属性指定动画应重复的次数。通过将其设置为无限，可以确保动画无限期地运行。

更新了 CSS：

/* Animation Keyframes*/
@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中文网其他相关文章！