Animate to change background of whole page - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:background

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. background

Description

Animate to change background of whole page

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

#wrapper {<!--   ww w. j a  v  a  2s.  c  o m-->
   background-color: #999;
   position: fixed;
   height: 100%;
   width: 100%;
}
#wrapper .section{
   position: absolute;
   top: 0;
   width: 51%;
   height: 100%;
   background: yellow;
}
#wrapper .section.section-left{
   left:0;
   animation: move 1.5s 1;
   animation-fill-mode: forwards;
}
#wrapper .section.section-right{
   right:0;
   animation: move 1.5s 1;
   animation-fill-mode: forwards;
}
@keyframes move{
   0%   {width: 51%;}
   100% {width:0%;}
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="wrapper"> 
   <div class="section section-left"></div> 
   <div class="section section-right"></div> 
  </div>  
 </body>
</html>

Related Tutorials