Home > Article > Web Front-end > Animating the column-count property of CSS

Animating the column-count property of CSS

WBOYforward: 2023-08-31 13:37:17708browse

To achieve animation effects using the column-count property in CSS, you can try running the following code

Example

Real-time demonstration

<!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>

The above is the detailed content of Animating the column-count property of CSS. For more information, please follow other related articles on the PHP Chinese website!

css count column

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What happens when converting 1 to a boolean in JavaScript?Next article：What happens when converting 1 to a boolean in JavaScript?

See more

Animating the column-count property of CSS

Example

Related articles