집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 최대 너비에서 애니메이션 수행

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

WBOY앞으로: 2023-08-26 20:09:06888검색

在 CSS max-width 上执行动画

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

예

라이브 데모

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

위 내용은 CSS 최대 너비에서 애니메이션 수행의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Less의 색상 채널 기능은 무엇입니까?다음 기사：Less의 색상 채널 기능은 무엇입니까?