Change CSS columns property with Animation

CSSWeb DevelopmentFront End Technology

To implement animation on columns property with CSS, you can try to run the following code:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
            column-rule: 10px inset orange;
            column-count: 4;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
               columns: 70px 6;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule color property</h2>
      <div>This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text! This is demo text! This is demo text!
         This is demo text!
      </div>
   </body>
</html>
raja
Published on 07-Jun-2018 12:17:49
Advertisements