CSS3 애니메이션 속성

CSS3의 새로운 애니메이션 속성“@keyframes”은 문자 그대로의 의미인 키프레임에서 볼 수 있으며 이는 Flash의 의미와 일치합니다. CSS3를 사용하여 애니메이션 효과를 만드는 원리는 Flash와 동일합니다. 키 프레임에서 상태 효과를 정의하고 CSS3를 사용하여 애니메이션 효과를 구동해야 합니다.

구문

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 필수입니다. 애니메이션의 이름을 정의합니다.
키프레임 선택기
필수입니다. 애니메이션 지속 시간의 백분율입니다.
적용되는 값:
0-100%
from(0%와 동일)
to(100%와 동일)
css-styles 필수입니다. 하나 이상의 합법적인 CSS 스타일 속성입니다.

정의 및 사용법
@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다.
애니메이션은 한 CSS 스타일 세트를 다른 CSS 스타일 세트로 점진적으로 변경하여 만들어집니다.
애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다.
변경이 발생하는 시간을 백분율로 지정하거나 0%와 100%에 해당하는 'from' 및 'to' 키워드를 통해 지정합니다.
0%는 애니메이션 시작 시간이고, 100%는 애니메이션 종료 시간입니다.
최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택자를 정의해야 합니다.
참고: 애니메이션 속성을 사용하여 애니메이션 모양을 제어하고 애니메이션을 선택기에 바인딩하세요.

브라우저 지원

현재 브라우저는 @keyframes 규칙을 지원하지 않습니다.
Firefox는 대체 @-moz-keyframes 규칙을 지원합니다.
Opera는 대체 @-o-keyframes 규칙을 지원합니다.
Safari와 Chrome은 대체 @-webkit-keyframes 규칙을 지원합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: #ff72cc;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
            }
            25% {
                top: 200px;
            }
            75% {
                top: 50px
            }
            100% {
                top: 100px;
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

CSS3 애니메이션

@keyframes에서 애니메이션을 생성할 때 이를 선택기에 바인딩하세요. 그렇지 않으면 애니메이션이 효과가 없습니다.

두 개 이상의 CSS3 애니메이션 속성이 선택기에 바인딩되도록 지정:

애니메이션 이름 지정

애니메이션 기간 지정

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
    <style type="text/css">
            div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: mymove 5s infinite;
            -moz-animation: mymove 5s infinite; /* Firefox */
            -webkit-animation: mymove 5s infinite; /* Safari and Chrome */
            -o-animation: mymove 5s infinite; /* Opera */
        }
        @keyframes mymove {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-moz-keyframes mymove /* Firefox */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
        @-o-keyframes mymove /* Opera */
        {
            0% {
                top: 0px;
                background: red;
                width: 100px;
            }
            100% {
                top: 200px;
                background: yellow;
                width: 300px;
            }
        }
    </style>
</head>
<body>
  <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
  <div></div>
</body>
</html>

의 CSS3 애니메이션 속성

다음 표에는 @keyframes 규칙과 모든 애니메이션 속성이 나열되어 있습니다.

속성 @keyframes는 애니메이션을 지정합니다. 3

animation animation-play-state 속성을 제외한 모든 애니메이션 속성에 대한 약식 속성입니다. 3

animation-name @keyframes 애니메이션의 이름을 지정합니다. 3
animation-duration 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다. 3

animation-timing-function 애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다. 3

animation-delay 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다. 3

animation-iteration-count 애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다. 3

animation-direction 다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다. 3

animation-play-state 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 "실행 중"입니다. 3

아아앙

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -moz-animation: mymove 5s infinite; /* Firefox */ -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ -o-animation: mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-moz-keyframes mymove /* Firefox */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } @-o-keyframes mymove /* Opera */ { 0% { top: 0px; background: red; width: 100px; } 100% { top: 200px; background: yellow; width: 300px; } } </style> </head> <body> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> <div></div> </body> </html>

제출하다 코드 재설정

자동운전