Menu
I'm using css3 to animate some text. I'm just trying to fade it in, and then disappear only to do it again a few seconds later (after other animations). The problem i'm having is my text fades in but immediately disappears even though i have the keyframe finish @ opacity:1; Why is my text disappearing? Here's the code:
<style>
#myArea {
height:250px;
width:300px;
position:relative;
overflow:hidden;
}
.text {
position:absolute;
z-index:1;
bottom:20px;
left:10px;
opacity:1;
}
#txt1 {
animation: txt1-fade 1s 1 ease-in;
animation-delay:1s;
}
#txt2 {
-webkit-animation: txt2-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt2-fade 5s infinite;
}
#txt3 {
-webkit-animation: txt3-fade 5s infinite; /* Chrome, Safari, Opera */
animation: txt3-fade 5s infinite;
}
@keyframes txt1-fade {
0% {opacity: 0; left:10px;}
100% {opacity: 1; left:10px;}
}
</style>
<body>
<div id="myArea">
<img src="images/backgrnd.jpg" />
<div id="txt1" class="text">
<img src="images/text1.png" />
</div>
<div id="txt2" class="text">
<img src="images/text2.png" />
</div>
<div id="txt3" class="text">
<img src="images/text3.png" />
</div>
</div>
355
By default elements return to their original state after an animation is completed. You can keep the state in which the element is in at end of animation by applying animation-fill-mode: forwards;
http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
