CSS3 애니메이션

CSS3를 사용하면 많은 웹 페이지 애니메이션 이미지, 플래시 애니메이션 및 JAVAScript를 대체할 수 있는 애니메이션을 만들 수 있습니다.

CSS3 @keyframes 규칙

CSS3 애니메이션을 만들려면 @keyframes 규칙을 이해해야 합니다.

@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다. 현재 스타일에서 새 스타일로 점진적으로 변경되는 @keyframes 규칙 내에서 CSS 스타일과 애니메이션을 지정합니다.

CSS3 Animations

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

적어도 다음 두 가지 CSS3 애니메이션 속성이 선택기에 바인딩되도록 지정하세요.

애니메이션 이름을 지정하고 애니메이션 기간을 지정하세요.

예

"myfirst" 애니메이션 바인딩 div 요소에 지속 시간: 5초:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Note: 애니메이션 이름과 애니메이션 지속 시간을 정의해야 합니다. 지속시간을 생략하면 기본값이 0이므로 애니메이션이 실행되지 않습니다.

프로그램을 실행해서 사용해 보세요

CSS3 애니메이션이란 무엇인가요?

애니메이션은 요소를 한 스타일에서 다른 스타일로 점진적으로 변경하는 효과입니다.

원하는 만큼 스타일을 원하는 만큼 여러 번 변경할 수 있습니다.

%를 사용하여 변경이 발생하는 시간을 지정하거나, 0%와 100%에 해당하는 "from" 및 "to" 키워드를 사용하세요.

0%는 애니메이션의 시작이고, 100%는 애니메이션의 완료입니다.

최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택자를 정의해야 합니다.

인스턴스

애니메이션이 25%와 50%일 때 배경색을 변경하고 애니메이션이 100% 완료되면 다시 변경합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
</body>
</html>

프로그램을 실행하여 사용해 보세요

예

배경 색상 및 위치 변경:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            animation:myfirst 5s;
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
        }
        @keyframes myfirst
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0%   {background:red; left:0px; top:0px;}
            25%  {background:yellow; left:200px; top:0px;}
            50%  {background:blue; left:200px; top:200px;}
            75%  {background:green; left:0px; top:200px;}
            100% {background:red; left:0px; top:0px;}
        }
    </style>
</head>
<body>
<div>css动画</div>
</body>
</html>

프로그램을 실행하고 사용해 보세요

CSS3 애니메이션 속성

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

3 결과:

Property	Description	CSS
@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	애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 "실행 중"입니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } </style> </head> <body> <div>css动画</div> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear