Teach with us

Perform Animation on CSS min-width

CSSWeb DevelopmentFront End Technology

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

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            overflow: auto;
            width: 50%;
            background-color: blue;
            color: white;
            border: 1px solid black;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               min-width: 550px;
            }
         }
      </style>
   </head>
   <body>
      <h1>Example of min-width</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>
raja
Chandu yadav
Updated on 25-Jun-2020 14:46:05

Previous Page Print Page Next Page  
Advertisements