Can anybody tell me what is wrong with this CSS animation? The content display stays "none", the animation isn't running...

<body> <style> #a{ display:none; -webkit-animation:aa 1s ease; }#b{ display:none; -webkit-animation:bb 1s ease 1s; } @-webkit-keyframes aa{ 0% {display:none;} 100% {display:block;} } @-webkit-keyframes bb{ 0% {display:none;} 100% {display:block;} } </style> <div id="a"> <h1>Hello</h1> </div> <div id="b"> <h1>Hi there</h1></div> </body> Any ideas? Do the last 2 properties have to be defined?

html css html5 display css3 animation div keyframes -webkit-

5th Feb 2017, 10:01 PM

Jayden Webb

1 Answer

+ 4

use opacity instead of display <body> <style> #a{ opacity:0%; -webkit-animation:aa ease 1s infinite; }#b{ opacity:0%; -webkit-animation:bb ease 2s infinite; } @-webkit-keyframes aa{ 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes bb{ 0% {opacity:0;} 100% {opacity:1;} } </style> <div id="a"> <h1>Hello</h1> </div> <div id="b"> <h1>Hi there</h1> </div> </body> http://stackoverflow.com/questions/26607330/css-display-none-and-opacity-animation-with-keyframes-not-working seems like you can also use visibillity instaed opacity

5th Feb 2017, 11:51 PM

Burey