728x90
728x170
* 애니메이션
- CSS3의 애니메이션은 키 프레임이라는 어떤 시점의 상태를 정한 체인 포인트와 같은 것을 나열함으로써 작성함.
- 애니메이션은 이러한 키 프레임을 보완하듯이 움직임.
- 키 프레임은 아래와 같이 @keyframes를 사용하여 설정함.
|
1
2
3
4
5
6
7
8
9 |
@keyframes animation{ // 키 프레임명
0%{ // 키 프레임의 위치를 퍼센트 값으로 지정함.
color:red; // 여기에 요소의 상태를 작성함.
}
...
50%{ ... }
...
100%{ ... }
} |
cs |
* 애니메이션 관련 프로퍼티
|
프로퍼티 |
기능 |
|
animation-name |
적용할 키 프레임명 |
|
animation-duration |
애니메이션의 재생 시간 |
|
animation-timing-function |
애니메이션의 실행 속도 패턴 패턴의 예) else : 천천히 가속하고 천천히 감속함. linear : 일정 비율로 변화함. ease-in : 천천히 가속함. ease-out : 천천히 감속함. ease-in-out : 처음과 마지막의 변화를 부드럽게 함. |
|
animation-delay |
애니메이션을 시작하기까지의 시간 |
|
animation-iteration-count |
애니메이션을 반복할 횟수 반복하고 싶은 횟수나 infinite(무한)를 지정함. |
|
animation-direction |
애니메이션을 반복할 방향 normal : 동일한 시작 지점부터 동일한 방향으로 반복 alternate : 홀수 번째는 보통 방향, 짝수 번째는 역방향으로 실행 |
* 애니메이션의 예
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 |
<!DOCTYPE html>
<html>
<head>
<title>애니메이션</title>
<meta charset="utf-8">
<style>
@keyframes animation1 {
0% { margin-left: 0px; background-color: red;}
100% { margin-left: 200px; background-color: grey; }
}
@-webkit-keyframes animation1 {
0% { margin-left: 0px; background-color: red;}
100% { margin-left: 200px; background-color: grey; }
}
@-moz-keyframes animation1 {
0% { margin-left: 0px; background-color: red;}
100% { margin-left: 200px; background-color: grey; }
}
#anime {
width: 100px;
height: 100px;
margin: 10px;
color: white;
animation-name: animation1;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-duration: 1s;
-moz-animation-name: animation1;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 1s;
-webkit-animation-name: animation1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}
</style>
</head>
<body>
<p id="anime">HTML5가 보이는 그림책</p>
</html>
|
cs |
[지원 상황]
|
|
IE |
Firefox |
Opera |
Safari |
Chrome |
|
animation |
X |
-moz- |
X |
-webkit- |
-webkit- |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
728x90
그리드형(광고전용)
'Programming > CSS3' 카테고리의 다른 글
| CSS 요점 정리 (0) | 2017.05.20 |
|---|---|
| 글꼴 다운로드 (0) | 2017.05.19 |
| 플렉서블 박스 (Flexible Box) (0) | 2017.05.19 |
| CSS3의 그라데이션 (0) | 2017.05.19 |
| CSS3의 새로운 스타일 3 (0) | 2017.05.19 |
| CSS3의 새로운 스타일 2 (0) | 2017.05.19 |
| CSS3의 새로운 스타일 1 (0) | 2017.05.19 |
| 벤더 프리픽스(Vendor Prefix) (0) | 2017.05.19 |
