작성일자
카테고리 CSS/CSS2.1

이전 글에서 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;

}


위와같이 추가하면 이미지에 마우스를 올렸을 때 애니메이션이 중지됩니다. 애니메이션 도중 특정 부분을 보고자 할때 사용합니다.



저작자 표시 비영리 변경 금지
신고

티스토리 툴바