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

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

i have 5 crossfading images hover div appear above image. have added link reference each image below , set css "a" component in order images pan in , 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 { 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 trying figure out how insert display: block , display: none within keyframe animation css able link right website. each image has different url associated it. method 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 add-on info</span3> </div> </a> <a href="http://yahoo.com"> <img src="stump.png" alt="" /> <div class="caption">title 2 <br /> <span3>subtitle two</span3> </div> </a> <a href="http://gmail.com"> <img src="um_huddle1.png" alt="" /> <div class="caption">title 1 <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>

i have managed come using z-index in order accomplish want. each keyframe animation (5), used next 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 }

}

html css