Use the will-change property and CSS animations - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Animation Control

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

Description

Use the will-change property and CSS animations

Demo Code

ResultView the demo in separate window 

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

.container {<!--from   ww w  .jav a 2 s.c o m-->
   border: 1px solid red;
   padding: 100px;
}
.box {
   width: 100px;
   height: 100px;
   border-radius: 20px;
   margin: 50px;
   animation-name: fadeUpIn;
   animation-duration: 2s;
   animation-fill-mode: forwards;
}
.box1 {
   background: linear-gradient(to bottom right, red, fuchsia);
}
.box2 {
   background: linear-gradient(to bottom right, green, lawngreen);
}
@keyframes fadeUpIn {
   from {
      will-change: transform, opacity;
      transform: translateY(0%) translateZ(0);
      opacity: 0;
   }
   to {
      will-change: unset;
      transform: translateY(-100%);
      opacity: 1;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="box box1"></div> 
   <div class="box box2"></div> 
  </div>  
 </body>
</html>

Related Tutorials