CSS3를 사용한 애니메이션

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>
 
Colored by Color Scripter

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