안녕하세요, 이번 포스팅에서는 css를 사용하여 이미지를 움직이게 하는 것을 구현해보겠습니다.
포스팅에서 사용된 코드는 아래 스틱코드에서 간편하게 사용하실 수 있습니다.
css 애니메이션 사용해서 이미지 이동하기 - Stickode
스틱코드
stickode.com
아래 설명할 코드를 통해, 다음과 같은 애니메이션을 구현하게 됩니다.
먼저 애니메이션으로 보여줄 이미지를 두 개 준비합니다.
코드에서는 leaf.jpg와 polar_bear.jpg를 사용했습니다.
다음으로는 각 이미지의 동작을 정의하는 css 코드가 필요합니다.
single_move.css
#div1 {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 100px;
-webkit-transform: scale(1);
}
.move_scale {
-webkit-animation-name: animation_scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both
}
.move_to_left {
-webkit-animation-name: animation_move;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: both
}
@-webkit-keyframes animation_scale {
0% {
-webkit-transform: translateX(100px) translateY(100px) scale(0.25);
opacity: 0;
}
1% {
opacity: 1;
}
100% {
-webkit-transform: translateX(0px) translateY(0px) scale(1);
}
}
@-webkit-keyframes animation_move {
0% {
-webkit-transform: translateX(1000px) translateY(0px) scale(1);
}
100% {
-webkit-transform: translateX(0px) translateY(0px) scale(1);
}
}
크기가 작았다가 원상태로 돌아오는 animation_scale을 사용하는 move_scale 클래스와,
오른쪽에서 왼쪽으로 이동하는 animation_move를 사용하는 move_to_left 클래스를 만들었습니다.
이번엔, 만든 css 코드를 활용해 html에서 이미지를 움직이는 코드를 짜보겠습니다.
single_move.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>단일 이미지 애니메이션</title>
<link type="text/css" rel="stylesheet" href="./css/single_move.css"/>
</head>
<body>
<div id="div1">
<img class="move_to_left" src="image/polar_bear.jpg" height="1141" width="1600"/></div>
<img class="move_scale" src="image/leaf.jpg" height="877" width="500"/>
</body>
</html>
폴더 구성은 다음과 같습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML / CSS] 텍스트 세로 중앙 방향으로 중앙정렬 하기 (1) | 2021.10.18 |
|---|---|
| [HTML / CSS] Lottie 이용해보기 (0) | 2021.09.21 |
| [HTML / CSS] font Awesome 사용해보기 (0) | 2021.07.31 |
| [HTML / CSS] 버튼태그, a태그로 페이지 이동하기 (0) | 2021.07.29 |
| [HTML / CSS] 가상요소, 가상 클래스를 이용해서 아코디언 메뉴바 제작하기 (0) | 2021.07.18 |
