Perform animation on CSS max-width

WBOY

Release： 2023-08-26 20:09:06

forward

846 people have browsed it

在 CSS max-width 上执行动画

To use CSS to animate the max-width property, you can try running the following code

Example

Live demonstration

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

Copy after login

The above is the detailed content of Perform animation on CSS max-width. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：What are the color channel functions in Less? Next article：What are contextual selectors in CSS?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn