이전 글에서 transform 속성을 이용한 이미지 애니메이션 효과를 알아보았는데 무한반복을 위해 제이쿼리 코드를 사용했습니다. 이번에는 순수한 CSS만을 이용해 애니메이션 효과를 만드는 방법을 알아보겠습니다. 이번에는 애니메이션이 동작되는 도중 중지할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container">
<img src="004.jpg">
</div>
</body>
</html>
이미지를 추가하고 .image-container로 감싸줍니다. 이미지는 상하로 긴 이미지입니다. 스타일을 추가하기 위해 style.css를 연결해줍니다.
.image-container {
width: 600px;
height: 400px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 7px;
position: relative;
}
.image-container img {
max-width: 100%;
}
이미지 박스를 만들어주소 이미지에 대해서는 max-width를 이용해 이미지 전체 폭이 나타나도록 합니다.
위와같이 나타납니다.
.image-container img {
max-width: 100%;
position: relative;
-webkit-animation-name: ani-test; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: ani-test;
animation-duration: 10s;
animation-iteration-count: infinite;
}
이미지에 대해 위처럼 설정합니다. 포지션을 이용해 애니메이션을 할 것이므로 position:relative;로 했습니다. 애니메이션은 keyframe으로 이뤄지므로 이에 대한 이름을 animation-name에 설정합니다. animation-duration은 애니메이션이 동작되는 시간입니다. animation-iteration-count는 애니메이션 반복 회수이며 숫자를 입력하거나 infinite를 입력하면 무한반복됩니다. 사파리 브라우저를 위해 -webkit-을 추가한 속성을 별도로 만들어줍니다.
.image-container img {
max-width: 100%;
position: relative;
-webkit-animation-name: ani-test; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: ani-test;
animation-duration: 10s;
animation-iteration-count: infinite;
transform: translateZ(0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
}
애니메이션 되면서 이미지가 떨리는 것을 방지하기 위해 transform:translateZ(0)을 추가해줍니다.
/* Safari 4.0 - 8.0 */
@-webkit-keyframes ani-test {
0% {left:0px; top:0px;}
50% {left:0px; top:-744px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
@keyframes ani-test {
0% {left:0px; top:0px;}
50% {left:0px; top:-744px;}
100% {left:0px; top:0px;}
}
ani-test라는 애니메이션 이름에 대해 키프레임 속성을 설정합니다. 애니메이션이 일어나는 10초동안 50%인 5초동안은 포지션이 -744픽셀 이동합니다. 다시 5초동안은 원래의 위치로 이동합니다.
.image-container img:hover {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
위와같이 추가하면 이미지에 마우스를 올렸을 때 애니메이션이 중지됩니다. 애니메이션 도중 특정 부분을 보고자 할때 사용합니다.
