Computer >> Computer tutorials >  >> Programming >> CSS

Animate CSS column-count property


To implement animation on column-count property with CSS, you can try to run the following code

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 400px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-count: 4;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column-count 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>