html - CSS keyframes image fadeInOut refuses to animate -

-

this question has answer here:

i want make 2 images fade smoothly between them.

images appear on browser, animation not work.

i think issue related @keyframes or #cf3 img.top sections... other sections seems work.. tested on chrome.

<!doctype html> <html>     <head>         <title>test</title>         <link rel="stylesheet" type="text/css" href="style.css">     </head>      <body>         <div id="cf">             <img class="bottom" src="assets/1.png" />             <img class="top" src="assets/2.png" />         </div>     </body> </html>

style.css, fading animation at:

#cf {     position: relative;     height: 281px;     width: 450px;     margin: 0 auto; }  #cf img {     position: absolute;     left: 0;     -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; }

your code fine selecting wrong id.

your code:

#cf3 img.top {

should be

#cf img.top {

the keyframes can above or below selector both work.

example


Comments

Post a Comment