3

I’m trying to get some (will be images) blocks to fade in pause for a few seconds and then fade out....

I’ve got it so far but it doesn’t seem to want to stay faded out and i’m unsure where i’m going wrong.

After its faded out it then shows up again.

I have a fiddle which shows it very basicly.

/* Defines the animation keyframes */
@-webkit-keyframes fadein {
0% {
     opacity: 0;
 }

 72% {
     opacity: 0;
 }

 100% {
     opacity: 1;
 } 
}
@-moz-keyframes fadein {
  0% {
       opacity: 0;
   }

   72% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   } 
}
@keyframes fadein {
 0% {
      opacity: 0;
  }

  72% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }

}


/* Defines the animation keyframes */
@-webkit-keyframes fadeOut {
0% {
     opacity: 1;
 }

 72% {
     opacity: 0;
 }

 100% {
     opacity: 0;
 } 
}
@-moz-keyframes fadeOut {
  0% {
         opacity: 1;
     }

     72% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     } 
}
@keyframes fadeOut {
 0% {
        opacity: 1;
    }

    72% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    } 

}

.get{
  -webkit-animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ; 
 -moz-animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ;
  animation: fadein 1.9s ease-in-out 0s 1, 
    fadeOut 1.9s ease-in-out 5s 1 ;

   background-color:red;
}



 .give{
   -webkit-animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ;  ; 
   -moz-animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ; 
   animation: fadein 2.8s ease-in-out both 0s 1, 
    fadeOut 1.9s ease-in-out 8s 1 ; 
     background-color:green;
   }
user4630
  • 633
  • 1
  • 9
  • 23

1 Answers1

4

Use a single animation ...

*{
  margin:0;
  padding:0;
}
.block{

  width:100px;
  height:100px
  display:block;
  height:100px;
}


@keyframes fadein {
  0%, 100% {
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

}

.get{
  opacity: 0;
  animation: fadein 2s ease-in-out 0s 1;  
  background-color:red;
}



.give{
  opacity: 0;
  animation: fadein 3s ease-in-out both 1s 1;
  background-color:green;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="block get">Get</div>
<div class="block give">Give</div>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63