Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 최소 너비에서 애니메이션 수행

<시간/>

CSS를 사용하여 최소 너비 속성에 애니메이션을 구현하려면 다음 코드를 실행해 보세요.

예시

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