6

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>
Harry
  • 87,580
  • 25
  • 202
  • 214
Damien
  • 4,093
  • 9
  • 39
  • 52

1 Answers1

24

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

Naman Nehra
  • 630
  • 4
  • 10
  • sweet! is there a way i could "say" after this animation is done, do this other animation and so on and so forth? – Damien Mar 15 '16 at 01:35
  • You can listen for animationend event using JavaScript and trigger the next animation when pervious one ends – Naman Nehra Mar 15 '16 at 06:59
  • You can also use Web Animations to do it. It makes grouping animations very easy but it not supported in most browsers yet so you'll need to use a polyfill https://developers.google.com/web/updates/2015/04/simplified-concepts-in-web-animations-naming?hl=en – Naman Nehra Mar 15 '16 at 07:03
  • great solution! – danivicario Mar 01 '19 at 23:00