고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
CSS 애니메이션 따라하기.... ^^
Javascript 나 플래시를 사용하지 않고도 CSS를 이용하여 애니메이션 효과를 만들어 낼 수 있습니다.
먼저, 어떻게 동작하는지 살펴보시지요. 아래 링크를 클릭하시면 데모를 보실 수 있습니다
http://meriqueen-woolmark.com/03_doolyit_image/animation.html
http://meriqueen-woolmark.com/03_doolyit_image/animation.html
meriqueen-woolmark.com
애니메이션에 사용된 고양이 이미지도 함께 첨부합니다.
1. 고양이 이미지 넣기
좌우로 왔다갔다 하는 고양이를 만들기 위해서, 먼저 DIV 태그 안에 고양이 이미지를 넣어놓습니다
|
1
2
3
|
<div>
<img src="http://www.meriqueen-woolmark.com/03_doolyit_image/cat.jpg">
</div>
|
cs |
2. 키프레임 설정하기
그 다음으로 필요한 것은 keyframe 을 설정하는 건데요,
|
1
2
3
4
|
@keyframes cat {
0% {left:0px; top:0px;}
100% {left:200px; top:0px;}
}
|
cs |
키프레임 이라는 것은 영화나 동영상 제작시에 사용하는 한 장면, 한 장면을 의미하는데요, CSS에서는 @keyframes 로 키프레임을 정의하게 됩니다. 위의 코드에서는 cat 이라는 이름의 애니매이션을 사용하겠다는 뜻입니다.
0%는 애니메이션이 처음 시작될때를 말합니다. 100%는 애니메이션이 끝났을때를 말하게 되구요. 즉, 처음에는 왼쪽/위 로부터 0px 에 위치해 있다가 끝에는 왼쪽에서 200px 위치로 이동한다는 뜻이됩니다.
3. 애니메이션 세부항목 설정하기
|
1
2
3
4
5
6
7
8
|
div {
position: relative;
animation-name: cat;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
|
cs |
1) 먼저 position 은 relative 로 설정합니다. absolute 로 하게되면 위치가 고정되기 때문에 움직이지 않게 됩니다.
2) animation-name 에 keyframe 설정시 사용했던 이름인 cat 을 입력해 줍니다.
3) animation-duration 은 애니메이션이 한번 실행되는 시간을 의미합니다. 즉, 좌측 0px 에서 우측 200px 까지 이동하는 시간입니다. 여기서는 1초로 설정했습니다
4) animation-timing-function : 애니메이션이 실행되는 동안의 움직임을 정하게 됩니다. linear 로 설정하면 동일한 속도로 이동하게되고, ease-in / ease-out 과 같은 옵션을 적용하게 되면 점점 빨라지거나 점점 느려지는 효과가 나타납니다
6) animation-iteration-count 는 반복횟수를 설정하는 부분입니다. infinite 로 하게되면 무한 반복한다는 뜻입니다
7) animation-direction 은 애니메이션이 한번 실행된 후에 반대방향으로 한번 실행한다는 뜻입니다. 즉, 우측으로 200px 갔다가 다시 좌측으로 200px 온다는 겁니다.
전체 코드는 다음과 같습니다
|
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
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
animation-name: cat;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes cat {
0% {left:0px; top:0px;}
100% {left:200px; top:0px;}
}
</style>
</head>
<body>
<div>
<img src="http://www.meriqueen-woolmark.com/03_doolyit_image/cat.jpg">
</div>
</body>
</html>
|
cs |
위 코드를 html 문서로 저장한 후에 실행시켜보면 바로 확인하실 수 있구요, 각종 속성을 지워보고 실행시켜보면 각 키워드의 속성을 알 수 있을겁니다 ^^
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| CSS 곡선 애니메이션, 패스애니메이션 따라하기 (2) | 2020.02.22 |
|---|---|
| CSS 애니메이션, 키프레임으로 하늘을 나는 새 만들어보기 CSS Animation Flying Bird (2) | 2020.02.18 |
| CSS 입력폼 크기, 정렬, 크롬/익스플로러/엣지 동일하게 표현하기 (0) | 2020.02.16 |
| 브라우저 높이 구하기, explorer, chrome,safari 등 웹사이트 높이 (0) | 2019.11.12 |
| PHP 에서 HTML 특수문자 확인하거나 출력하기, URL encoding (0) | 2019.08.06 |
댓글 영역