显示10秒后反复交叉淡化两幅图像 [英] Crossfade two images repeatedly after showing for 10 seconds

问题描述

我正在尝试使用HTML和CSS在每个显示10秒后交叉淡化两个图像。我想让它不断重复。

I'm trying to use HTML and CSS to crossfade two images after showing them for 10 seconds each. I want this to repeat constantly.

这是我的HTML：

<div id="container">
    <img class="bottom" src="1.png">
    <img class="top" src="2.png">
</div>

CSS：

#container {
    float: right;
    height: 246px;
    position:relative;
    width: 230px;
}

#container img {
    height: 246px;
    width: 230px;
    left:0;
    opacity: 0;
    position:absolute;
}

#container img.bottom {
    opacity: 1;
}

#container img.top {
    animation-duration: 0.1s;
    animation-name: crossFade;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes crossFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

我之前从未使用CSS动画，所以我'有点困惑。只显示底部图像，没有其他任何事情发生。

I've never used CSS animations before so I'm a bit confused. Only the "bottom" image is being shown and nothing else happens.

出了什么问题？

推荐答案

以下是 10s 延迟和 1s 动画持续时间的示例。

Here is an example with 10s delay and 1s animation duration.

#container {
  float: right;
  height: 246px;
  position: relative;
  width: 230px;
}
#container img {
  height: 246px;
  width: 230px;
  left: 0;
  opacity: 0;
  position: absolute;
}
#container img.bottom {
  opacity: 1;
}
#container img.top {
  -webkit-animation: crossFade 11s infinite;
  animation: crossFade 11s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes crossFade {
  0% {
    opacity: 0;
  }
  47.62% {
    opacity: 0;
  }
  52.38% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div id="container">
  <img class="bottom" src="https://dummyimage.com/200x200/404/fff">
  <img class="top" src="https://dummyimage.com/200x200/101/fff">
</div>

这篇关于显示10秒后反复交叉淡化两幅图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！