CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの最小の高さでアニメーションを実行する

CSSを使用してmin-heightプロパティにアニメーションを実装するには、次のコードを実行してみてください

例

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

  1. CSSmax-widthでアニメーションを実行する

    CSSを使用してmax-widthプロパティにアニメーションを実装するには、次のコードを実行してみてください 例 <!DOCTYPE html> <html>    <head>       <style>          div {             overflow: auto;             backg

  2. CSSの最大高さでアニメーションを実行する

    CSSを使用してmax-heightプロパティにアニメーションを実装するには、次のコードを実行してみてください。 例 <!DOCTYPE html> <html>    <head>       <style>          div {             width: 350px;             backgro