고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
CSS 애니메이션 하늘을 나는 새
javascript나 jquery를 이용하지 않고 CSS 만으로 애니메이션을 만들 수 있습니다.
위에 있는 새는, 움직이는gif(gif animation)로 만들어 본 것인데요, 요즘 흔히 말하는 움짤이죠. 귀엽게 하늘을 나는 새를 CSS 만으로 만들어 보겠습니다. 먼저, CSS 기본적인 애니메이션은 지난번에 포스팅한 아래 글을 참고하시기 바랍니다.
새 이미지의 크기에 맞게 394x293px 크기의 DIV 를 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
div {
width:394px;
height:293px;
animation-name: bird;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
|
cs |
1. animation-name 에 기입된 bird 는 아래에서 설정할 CSS 애니메이션의 이름입니다.
2. animation-duration 은 애니메이션이 실행되는 시간입니다. 여기서는 0.5초로 했습니다
3. animation-timing-function 의 linear 는 애니메이션이 일정한 속도로 실행된다는 뜻입니다
ease 라는 옵션을 사용할 경우 점점 빨라지거나 점점 느려지는 식으로 가능합니다
4. animation-iteration-count 의 infinite 는 무한 반복한다는 뜻입니다
우선 두개의 이미지를 이용해 보겠습니다. 날개를 올린 이미지와 내린 이미지 두개입니다.
|
1
2
3
4
5
|
@keyframes bird {
0% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird01.jpg);}
100% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird03.jpg);}
}
|
cs |
두개의 이미지를 번갈아 보여주기 위해 위와 같이 keyframes 를 설정합니다. 0%는 애니메이션이 시작되는 시점이고 100%는 애니메이션이 끝나는 시점입니다
시작될때는 background-image 를 bird01.jpg 로 설정하고 끝날때는 bird03.jpg 로 설정했습니다.
전체 코드는 다음과 같습니다
|
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 {
width:394px;
height:293px;
animation-name: bird;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes bird {
0% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird01.jpg);}
100% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird03.jpg);}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
|
cs |
2장의 이미지만 사용했기 때문에 움직임이 다소 끊기는 것을 볼 수 있는데요, 그래서 이미지를 6장으로 늘려서 만들어 봤습니다.
|
1
2
3
4
5
6
7
8
|
@keyframes bird {
0% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird01.jpg);}
20% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird02.jpg);}
40% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird03.jpg);}
60% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird04.jpg);}
80% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird05.jpg);}
100% {left:0px; top:0px;background-image: url(http://www.meriqueen-woolmark.com/03_doolyit_image/bird06.jpg);}
}
|
cs |
시간은 20%씩 나누었고, bird01.jpg 부터 bird06.jpg 까지 총 여섯개의 이미지를 사용했습니다
2장으로 만들었을 때 보다는 좀더 부드러워진 것을 확인하실 수 있습니다. 일반적인 애니메이션이 1초에 30프레임을 사용하니까 이미지를 좀더 세분화 시키면 좀더 부드러운 애니메이션을 만들 수 있겠죠
사용된 6개의 이미지를 아래에 첨부합니다.
본 포스팅 맨 처음에 넣어두었던 움짤은 위 6개 이미지로 만든것인데요, CSS로 만든 것보다는 훨씬 더 부드럽게 움직이는 것을 확인할 수 있는데요, 아무래도 전문적인 애니메이션 프로그램으로 만든게 아니라 웹상에서 움직이는 것이기 때문에 CSS로는 다소 한계가 있긴 합니다만, 기초적인 애니메이션은 충분히 가능하지 않을까 싶습니다^^
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| CSS 그라데이션 적용하기 ... linear-gradient (0) | 2020.12.02 |
|---|---|
| CSS 곡선 애니메이션, 패스애니메이션 따라하기 (2) | 2020.02.22 |
| CSS 애니메이션 따라하기, 움직이는 고양이 CSS Animation (0) | 2020.02.17 |
| CSS 입력폼 크기, 정렬, 크롬/익스플로러/엣지 동일하게 표현하기 (0) | 2020.02.16 |
| 브라우저 높이 구하기, explorer, chrome,safari 등 웹사이트 높이 (0) | 2019.11.12 |
댓글 영역