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

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

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

例

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

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

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

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

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