CSS3 애니메이션

이전 : CSS3 전환

다음 : CSS3 다중 열

CSS3 애니메이션

CSS3, 우리는 많은 페이지 애니메이션 이미지, 플래시 애니메이션, 자바 스크립트를 대체 할 수있는 애니메이션을 만들 수 있습니다.

CSS3
생기

CSS3 규칙을 @keyframes

CSS3 애니메이션을 만들려면 @keyframes 규칙을 배워야 할 것입니다.

@keyframes 규칙은 애니메이션을 만드는 것입니다. CSS 스타일을 지정하고 애니메이션은 점차 @keyframes 규칙 내에서 현재 스타일에서 새 스타일로 변경됩니다.

브라우저 지원

표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.

즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.

属性
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

예

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 애니메이션

애니메이션 @keyframes을 만들 때, 선택기에 바인딩 그렇지 않으면 애니메이션이 적용되지 않습니다.

CSS3 애니메이션 속성이 선택에 바인딩 된 두 개 이상의 지정

이 애니메이션의 이름을 지정
되면 소정 길이 애니메이션

예

오초 : DIV 요소 기간에 묶여 "죠아"애니메이션 :

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

»시도

참고 : 애니메이션과 애니메이션 이름의 지속 시간을 정의해야합니다.생략하면 기본 값이 0이기 때문에 애니메이션의 지속 시간은 실행되지 않습니다.

CSS3 애니메이션은 무엇입니까?

애니메이션 요소는 다른 스타일의 효과에 하나의 스타일에서 점진적 변화를 확인하는 것입니다.

당신은 여러 번만큼 스타일을 변경할 수 있습니다.

소정의 시간 변화율을 사용하거나 "에서"및 키워드하십시오 "를"0 %와 100 %에 해당한다.

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

최고의 브라우저 지원의 경우, 항상 0 %와 선택의 100 %를 정의해야합니다.

예

애니메이션이 25 %, 50 % 및 100 %의 애니메이션이 다시 변경 될 때 완료되면 배경색 변경 :

@keyframes myfirst
{
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;}
}

»시도

예

배경 색상 및 위치 변경 :

@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;}
}

»시도

CSS3의 애니메이션 속성

다음 표는 @keyframes 규칙 및 모든 애니메이션 속성을 나열합니다 :

재산	기술	CSS
@keyframes	규정 애니메이션.	3
생기	애니메이션 플레이 상태 속성뿐만 아니라 모든 애니메이션 속성에 대한 약식 속성.	3
애니메이션 이름	이름 @keyframes 애니메이션을 지정합니다.	3
애니메이션 지속 시간	규정 애니메이션 초 (밀리 초)의 사이클을 완료하는 데 소요됩니다. 기본값은 0입니다.	3
애니메이션 타이밍 기능	애니메이션 곡선의 소정의 속도. 기본값은 "완화"입니다.	3
애니메이션 지연	때 소정의 애니메이션이 시작됩니다. 기본값은 0입니다.	3
애니메이션 반복 카운트	애니메이션이 재생되는 시간의 소정의 수입니다. 기본값은 1입니다.	3
애니메이션 방향	애니메이션의 규정 여부는 다음 사이클에 역방향으로 재생합니다. 기본값은 "정상"입니다.	3
애니메이션 플레이 상태	애니메이션의 규정에 상관없이 실행 또는 일시 중지됩니다. 기본값은 "실행"입니다.	3

다음 두 예제는 모든 애니메이션 속성을 설정합니다 :

예

죠아 애니메이션, 설정된 모든 속성을 실행합니다 :

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

»시도