¡Nuevo curso! ¡Todo programador debería aprender IA Generativa!
Prueba una lección gratuita0
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?
1 Respuesta
+ 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