html - 如何使用显示:none/block within keyframe animation

Question

我目前有 5 个交叉淡入淡出图像，悬停 div 显示在图像上方。我已经添加了对下面每张图片的链接引用，并将 css 设置为“a”组件，以便图片能够正确地平移和平移。

.crossfade_container {
    display: inline-block;
    float: right;
    position: relative;
    background-color: #f0f0f0;
    width: 695px;
    height: 350px;
    margin-top: 10px;
    box-shadow: 2px 2px 2px silver;
  }
  #crossfade a {
    width: 695px;
    height: 350px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 60s linear infinite 0s;
    -moz-animation: imageAnimation 60s linear infinite 0s;
    -o-animation: imageAnimation 60s linear infinite 0s;
    -ms-animation: imageAnimation 60s linear infinite 0s;
    animation: imageAnimation 60s linear infinite 0s;
  }
  #crossfade .caption {
    font-size: 30px;
    opacity: 0;
    position: absolute;
    height: 75px;
    width: 665px;
    bottom: 0px;
    left: 0px;
    color: white;
    background: #00274c;
    text-align: left;
    padding-top: 10px;
    padding-left: 30px;
    border-bottom: 1px solid #00274c;
    font-weight: bold;
    line-height: 25px;
    -o-transition: .7s;
    -ms-transition: .7s;
    -moz-transition: .7s;
    -webkit-transition: .7s;
    transition: .7s;
  }
  #crossfade .caption span3 {
    font-size: 13px;
  }
  #crossfade:hover .caption {
    cursor: pointer;
    opacity: 1.0;
  }
  #crossfade:hover img {
    cursor: pointer;
  }
  #crossfade a:nth-child(2) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
  }
  #crossfade a:nth-child(3) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
  }
  #crossfade a:nth-child(4) {
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s;
  }
  #crossfade a:nth-child(5) {
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 48s;
    -ms-animation-delay: 48s;
    animation-delay: 48s;
  }
  @-webkit-keyframes imageAnimation {
    5% {
      opacity: 1;
      -webkit-animation-timing-function: ease-in;
      display: none;
    }
    8% {
      opacity: 1;
      -webkit-animation-timing-function: ease-out;
      display: block;
    }
    17% {
      opacity: 1
      display: block;
    }
    25% {
      opacity: 0
      display: block;
    }
    100% {
      opacity: 0
      display: block;
    }
  }
  @-moz-keyframes imageAnimation {
    0% {
      opacity: 1;
      -moz-animation-timing-function: ease-in;
      display: none;
    }
    8% {
      opacity: 1;
      -moz-animation-timing-function: ease-out;
      display: block;
    }
    17% {
      opacity: 1
      display: block;
    }
    25% {
      opacity: 0
      display: block;
    }
    100% {
      opacity: 0
      display: block;
    }
  }
  @-o-keyframes imageAnimation {
    0% {
      opacity: 1;
      -o-animation-timing-function: ease-in;
      display: none;
    }
    8% {
      opacity: 1;
      -o-animation-timing-function: ease-out;
      display: block;
    }
    17% {
      opacity: 1
      display: block;
    }
    25% {
      opacity: 0
      display: block;
    }
    100% {
      opacity: 0
      display: block;
    }
  }
  @-ms-keyframes imageAnimation {
    0% {
      opacity: 1;
      -ms-animation-timing-function: ease-in;
      display: none;
    }
    8% {
      opacity: 1;
      -ms-animation-timing-function: ease-out;
    }
    17% {
      opacity: 1
    }
    25% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }
  @keyframes imageAnimation {
    0% {
      opacity: 1;
      animation-timing-function: ease-in;
      display: none;
    }
    8% {
      opacity: 1;
      animation-timing-function: ease-out;
    }
    17% {
      opacity: 1
    }
    25% {
      opacity: 0
    }
    100% {
      opacity: 0
    }
  }

我想弄清楚如何在关键帧动画 CSS 中插入 display: block 和 display: none 以便能够链接到正确的网站。每个图像都有一个与之关联的不同 url。我的方法无法正常工作。

<div class="crossfade_container">
<div id="crossfade">
<a href="http://espn.com">
  <img src="the-schott.png" alt="" />
  <div class="caption">PREVIEW:
    <br />
    <span3>preview addition info</span3>
  </div>
</a>

<a href="http://yahoo.com">
  <img src="stump.png" alt="" />
  <div class="caption">TITLE TWO
    <br />
    <span3>subtitle two</span3>
  </div>
</a>

<a href="http://gmail.com">
  <img src="um_huddle1.png" alt="" />
  <div class="caption">TITLE ONE
    <br />
    <span3>subtitle one</span3>
  </div>
</a>

<a href="http://hotmail.com">
  <img src="osu_crossfade2.png" alt="" />
  <div class="caption">Caption Goes Here</div>
</a>

<a href="http://fox.com">
  <img src="um_qb1.png" alt="" />
  <div class="caption">Caption Goes Here</div>
</a>

Answer 1

我已经设法使用 z-index 来实现我想要的东西。对于每个关键帧动画 (5)，我使用了以下 CSS:

@-webkit-keyframes imageAnimation {
5% {
  opacity: 1;
  -webkit-animation-timing-function: ease-in;
  z-index: 100;
}
8% {
  opacity: 1;
  -webkit-animation-timing-function: ease-out;

}
17% {
  opacity: 1

}
25% {
  opacity: 0

}
100% {
  opacity: 0

}