html - 重复的 CSS3 横幅图像过渡

Question

我正在做一个元素，我有一个横幅。我希望横幅使用 css 从一个图像过渡到另一个图像，并在 10 秒后重复。我找到了有关如何操作的教程，但它仍然无法正常工作。感谢您的帮助!

HTML:

<div id="cf3">
<img class="bottom" src="img/skyline.png" />
<img class="top" src="img/kansas-skyline.png" />
</div>

CSS:

#cf3 {
    padding-top: 25px;
    position: relative;
    height: 275px;
    width: 1100px;
    margin: 0px auto;
}

#cf3 img {
    position: absolute;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

@keyframes cf3FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

Answer 1

创建了您的动画:animation

html

    <div class="cf3">
    <img class="bottom" src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" />
    <img class="top" src="http://placekitten.com/120/120" />
</div>

css

.cf3 {
         padding-top: 25px;
         position: relative;
         height: 275px;
         width:500px;
         margin: 0px auto;
         transition:all 2s ease;
     }
     .cf3 img {
         position:absolute;
         width:100%;
        height:100%;
         -webkit-transition:all 10s ease;
         -moz-transition:all 10s ease;
         -o-transition:all 10s ease;
         transition:all 10s ease;
     }
    .top {
    -webkit-animation: cssAnimation 10s infinite ease-in-out;
    -moz-animation: cssAnimation 10s infinite  ease-in-out;
    -o-animation: cssAnimation 10s infinite  ease-in-out;
    }
    @-webkit-keyframes cssAnimation {
    from { opacity:0; }
    to { opacity:1; }
    }