Perform Animation on CSS max-height



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

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 350px;
            background-color: orange;
            overflow: auto;
            border: 1px solid black;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               max-height: 100px;
            }
         }
      </style>
   </head>
   <body>
      <h1>Example of max-height</h1>
      <div>
         <p>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.
         </p>
      </div>
   </body>
</html>

Advertisements