CSS Animation Delay - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Animation Control

Description

CSS Animation Delay

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

@-moz-keyframes fadein { /* Firefox */
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from { opacity:0; }
to { opacity:1; }
}
@-o-keyframes fadein { /* Opera */
from { opacity:0; }
to { opacity: 1; }
}
@keyframes fadein {<!--  w ww .j ava  2s.  c  om-->
   from { opacity:0; }
   to { opacity:1; }
}
@-moz-keyframes fadeout { /* Firefox */
from { opacity:1; }
to { opacity:0; }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
from { opacity:1; }
to { opacity:0; }
}
@-o-keyframes fadeout { /* Opera */
from { opacity:1; }
to { opacity: 0; }
}
@keyframes fadeout {
   from { opacity:1; }
   to { opacity:0; }
}
.coming{
   width:320px;
   height:auto;
   position:absolute;
   top:0px;
   left:0px;
   margin-left:10px;
   background:#FFF;
   color:#000;
   font-family: Sans-Serif;
   font-size:24px;
   border-radius: 10px 10px 10px 10px;
   -moz-box-shadow: 0px 0px 0px #000;
   -webkit-box-shadow: 0px 0px 0px #000;
   box-shadow: 1px 1px 5px #222;
   padding:2px 20px;
}
#people .coming{
   -moz-animation: fadein 3s ease-in; /* Firefox */
   -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
   -o-animation: fadein 3s ease-in; /* Opera */
   animation: fadein 3s ease-in;
}
.going{
   width:320px;
   height:auto;
   position:absolute;
   opacity: 0;
   top:120px;
   left:0px;
   margin-left:10px;
   background:#FFF;
   color:#000;
   font-family: Sans-Serif;
   font-size:24px;
   border-radius: 10px 10px 10px 10px;
   -moz-box-shadow: 0px 0px 0px #000;
   -webkit-box-shadow: 0px 0px 0px #000;
   box-shadow: 1px 1px 5px #222;
   padding:2px 20px;
}
#people .going{
   -moz-animation: fadein 3s ease-in forwards; /* Firefox */
   -webkit-animation: fadein 3s ease-in forwards; /* Safari and Chrome */
   -o-animation: fadein 3s ease-in forwards; /* Opera */
   animation: fadein 3s ease-in forwards;
   -moz-animation-delay: 7s;
   -webkit-animation-delay: 7s;
   -o-animation-delay: 7s;
   animation-delay: 7s;
}


      </style> 
 </head> 
 <body> 
  <div id="people"> 
   <div class="coming">
     test test test
   </div> 
   <div class="going">
     aaa aaa aaa aaa 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials