时间戳

首页 > 解决方案 > 使用 css 动画淡出一个图像并淡入另一个图像

css-animations - 使用 css 动画淡出一个图像并淡入另一个图像

问题描述

我有两个图像我想在它们之间交替。我想让一个图像完全淡出，然后让第二个图像淡入。我希望这两个图像像无限循环一样。

标签： css-animations

解决方案

您可以很容易地实现这一点，方法是使用keyframesfor youropacity并为第二张图像提供animation-delay动画所需时间的一半。

.fadein {
    position:absolute;
    top:0px;
}
.fadein img {
    opacity: 0;
    position:absolute;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f2 {
    animation-delay: 3s;
}
<div class="fadein">
  <img src="https://dummyimage.com/600x400/000/fff" id="f1">
  <img src="https://dummyimage.com/600x400/abc/fff" id="f2">
</div>

推荐阅读