CSS3 애니메이션
CSS3 애니메이션은 자바 스크립트 나 플래시를 사용하지 않고 대부분의 HTML 요소의 애니메이션을 할 수 있습니다!
생기
애니메이션에 대한 브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit-, -moz- , 또는 -o- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| @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- |
CSS3 애니메이션은 무엇입니까?
애니메이션은 요소가 점차 다른 하나의 스타일에서 변경할 수 있습니다.
당신은 당신이 원하는만큼의 CSS 속성, 당신이 원하는만큼 여러 번 변경할 수 있습니다.
CSS3 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇 가지 키 프레임을 지정해야합니다.
키 프레임은 요소가 특정 시간에해야합니다 어떤 스타일을 개최합니다.
@keyframes 규칙
당신이 내부 CSS 스타일을 지정하면 @keyframes 규칙을, 애니메이션은 점차 특정 시간에 새로운 스타일을 현재 스타일에서 변경됩니다.
작업에 애니메이션을 얻으려면, 당신은 요소에 애니메이션을 결합해야합니다.
다음 예는에 "예"애니메이션이 결합 <div> 요소를. 애니메이션의 뜻은 4 초 지속, 그리고 점차의 배경 색상이 변경됩니다 <div> "레드"에서 "노란색"에서 요소를 :
예
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
»그것을 자신을 시도 참고 : 경우 animation-duration 속성이 지정되지 않은 디폴트 값이 0이기 때문에, 애니메이션이 영향을 미치지 않는다.
우리는 스타일이 키워드를 사용하여 변경할 때 지정한 위의 예에서 "from" 과 "to" (0 %를 나타내는 (시작) 100 % (완전)).
이 퍼센트를 사용하는 것도 가능하다. 당신이 원하는대로 퍼센트를 사용하면 많은 스타일의 변화를 추가 할 수 있습니다.
다음은 배경 색상이 변경됩니다 <div> 애니메이션이 100 % 완료되면 다시 애니메이션이 50 % 완료, 25 % 완료되면 요소 및 :
예
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} »그것을 자신을 시도 다음은 배경색 및 위치 모두 변화한다 <div> 애니메이션이 100 % 완료되면 다시 애니메이션이 50 % 완료되면 25 % 완료되면 소자 및 :
예
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} »그것을 자신을 시도 애니메이션을 지연
animation-delay 속성은 애니메이션의 시작에 대한 지연 시간을 지정합니다.
다음의 예는 애니메이션을 시작하기 전에 2 초 지연을 가지고
예
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} »그것을 자신을 시도 애니메이션이 실행 횟수를 설정합니다
animation-iteration-count 속성은 애니메이션이 실행해야하는 횟수를 지정합니다.
멈출 전에 다음의 예는 애니메이션 3 회를 실행합니다 :
예
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} »그것을 자신을 시도 다음의 예는 "값을 사용하여 infinite 애니메이션이 영원히 계속 만들어"
예
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} »그것을 자신을 시도 역방향 또는 다른 사이클에 애니메이션을 실행
animation-direction 속성은 반대 방향 또는 대체 사이클에서 애니메이션 실행을 허용하는 데 사용됩니다.
다음 예는 역방향의 애니메이션을 실행한다 :
예
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} »그것을 자신을 시도 다음은 값 사용 "alternate" 애니메이션이 처음으로 앞으로 다음 뒤로 한 다음, 앞으로 실행하기 위해 :
예
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} »그것을 자신을 시도 애니메이션의 속도 곡선을 지정
animation-timing-function 특성은 애니메이션의 속도 곡선을 지정한다.
애니메이션 타이밍 기능의 속성은 다음의 값을 지정할 수 있습니다 :
-
ease- 느린 시작으로 애니메이션을 지정하고 빠르고, 다음 (이 기본값) 천천히 종료 -
linear- 처음부터 끝까지 같은 속도로 애니메이션을 지정합니다 -
ease-in- 느린 시작으로 애니메이션을 지정합니다 -
ease-out- 느린 끝으로 애니메이션을 지정합니다 -
ease-in-out- 느린 시작과 끝으로 애니메이션을 지정합니다 -
cubic-bezier(n,n,n,n)- 당신이 차 - 베 지어 함수에서 자신의 값을 정의 할 수 있습니다
다음의 예 사용될 수있는 다른 속도 곡선의 일부 보여
예
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} »그것을 자신을 시도 애니메이션 약식 속성
아래의 예는 애니메이션 속성의 여섯 사용
예
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
»그것을 자신을 시도 상기와 속기 사용하여 달성 될 수있는 같은 애니메이션 효과 animation 속성 :
연습으로 자신을 테스트!
연습 1» 운동 2» 운동 3» 운동 4» 운동 5» 운동 6»
CSS3 애니메이션 속성
다음 표에 나열 @keyframes 규칙 모든 애니메이션 속성 :
| 재산 | 기술 |
|---|---|
| @keyframes | 애니메이션 코드를 지정합니다 |
| animation | 모든 애니메이션 속성을 설정하는 약식 속성 |
| animation-delay | 애니메이션의 개시에 대한 지연을 지정 |
| animation-direction | 애니메이션은 역방향 또는 대체 사이클에서 재생할지 여부를 지정합니다 |
| animation-duration | 애니메이션이 한 사이클을 완료하는 데 걸리는 몇 초 또는 밀리 초 단위로 지정 |
| animation-fill-mode | 애니메이션이 재생되지 않을 때 요소의 스타일을 지정한다 (이 완료 될 때 또는 그것이 지연을 가질 때) |
| animation-iteration-count | 애니메이션이 재생 횟수를 지정합니다 |
| animation-name | @keyframes 애니메이션의 이름을 지정합니다 |
| animation-play-state | 애니메이션이 실행 중이거나 일시 정지 여부를 지정합니다 |
| animation-timing-function | 애니메이션 속도 곡선을 지정 |