1

I've got a problem with an animation using @keyframes method.
The animation is execute like I want but at the end of the animation duration the opacity go back to a wrong value.
The purpose of my animation is to show an information message while playing with opacity and after some seconds hide it. It works.
Actual state: Hide :: Display :: Hide :: Display
Objective state: Hide :: Display :: Hide
However at the end of the animation the opacity is 1.
I show you my stuff: 

.pop_in_information{
  width: 100%;
  position: fixed;
  bottom: 1%;
  height: auto;

  animation-name: close-pop-in;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes close-pop-in {
  0%{ opacity: 0; }
  20%{ opacity: 1; }
  80%{ opacity: 1; }
  100%{ opacity: 0; }
}

As you can see at the end of the animation the opacity is 0. In fact it is not.
I use Bootstrap for my HTML.

<div class="pop_in_information">
   <div class="row text-center">
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
         <div class="alert alert-success fade in no-margin">
            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">&times;</a>
            <strong>Hi StackOverflow</strong>
         </div>
      </div>
      <div class="col-sm-2"></div>
   </div>
 </div>

Maybe I don't understand the animation in CSS and it's a normal behavior nevertheless I'm not sure of that.
Thanks for the help.

EDIT : animation-fill-mode: forwards is the solution.

C0ZEN
  • 894
  • 11
  • 41

1 Answers1

0

you can refer this example:

<div id="parent">
                Hi StackOverflow
                <div id="myDiv">
                    Hello!
                </div>
            </div>

DEMO FIDDLE

SEE THE PAGE

Community
  • 1
  • 1
Ivin Raj
  • 3,448
  • 2
  • 28
  • 65