1. 목표
고양이가 걸어가는 애니메이션 만들기
2. 구현 미리보기
더욱 간단하게 만드는 방법도 있다.(날라가는 새)
3. 구현하기
1) HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>고양이가 움직이는 애니메이션</title>
<link rel="stylesheet" href="css/cat.css">
</head>
<body>
<div class="catArea">
<div class="cat"></div>
</div>
</body>
</html>2) CSS
body {background:#626262;}
.catArea {
border:3px solid yellow; width:209px;
position:fixed; left:0; top:200px;
animation: toRight 15s infinite both linear;
}
@keyframes toRight {
from {left: 0;}
to {left: 100vw;}
}
.cat {
background-image: url( "../images/cat.jpg" );
width:209px; height:436px;
border:3px dashed red;
animation: cat 1s infinite steps(8) ;
}
@keyframes cat {
100% {background-position: 1672px;}
}4. 요약
- 8개의 영역으로 나뉜 가로로 긴 사진을 준비한다.
- 이 때 사진의 영역은 같은 크기여야 한다.(예시에선 width 209px x 8로 총 1672px)
- 단 8장의 사진만으로도 이정도의 애니메이션을 구현할 수 있다! 어도비 프리미어로 만드는 것보다 쉽다!
background-image: url( "../images/cat.jpg" )에서 ".."은 백그라운드 이미지를 현재 파일 위치에서 한 단계 위로 가서 images 폴더 안의 cat.jpg 파일을 찾는 것을 의미한다.animation: cat 1s infinite steps(8)은 애니메이션이 8단계로 나누어져서 진행된다는 의미다. 즉, 애니메이션이 부드럽게 진행되지 않고, 8개의 정해진 단계로 끊어져서 전환된다.
문과의 입장에서 바라본 코딩