0
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 Resposta
+ 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
Costuma ter perguntas como essa?
Aprenda de maneira mais eficiente, de graça:
