how to use display:none/block within keyframe animation - html

Question

I currently have 5 crossfading images with a hover div to appear above the image. I have added a link reference to each image below and set the css to the "a" component in order for the images to pan in and out properly.
.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
}
}
I am trying to figure out how to insert display: block and display: none within the keyframe animation css to be able to link to the correct website. Each image has a different url associated with it. my method is not working properly.
<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

I have managed to come up with something using z-index in order to achieve what I want. For each keyframe animation (5), I used the following 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
}
}