CSS 스프라이트와 steps를 사용하여 애니메이션 이미지를 만들자

CSS에서 움직이는 애니메이션은 나 자신 아직 잘 다룰 않은 특성을 많이 자고 있습니다. 그 중의 하나가 steps라는 특성이었습니다. 지금까지 잘 사용하고 매끄러운 동작이 아니라 단계별로 요소를 이동할 수 있습니다. 실제로 어떤 상황에서 사용할 수 있을까요? 이번에는 그런 steps특성에 초점을보십시오.

steps 작성 방법

steps은 animation과 keyframes등록 정보와 함께 이용합니다. steps()괄호 안에는 몇 단계를 거쳐 동작시킬 것인지를 설명했다. 예를 들어 5 단계로 변화 시킨다면 steps(5)로 설명합니다.

.element {

    animation: img-move 5s steps(5);

}

@keyframes img-move {

  to {

    transform: translateX(500px);

  }

}

이 CSS의 예이고, "5 초에 걸쳐 5 단계를 밟아 옆에 500px 움직이는거야 '라는 지시합니다.

그 밖에도 steps(5, start)것이나 steps(5, end)라는 식으로 start도시 end가 추가됩니다. start애니메이션이 시작되는 즉시 end치아 transition-duration에 지정된 시간이 경과했을 때 동작이 시작됩니다.

간단한 예

-html-

<p>steps 指定</p>

<img class="wcb-chan" src="http://icon.daumcdn.net/w/icon/1612/30/101624314.png" alt="" width="100" height="117">

<p>steps なし</p>

    <img class="wcb-chan-nostep" src="http://icon.daumcdn.net/w/icon/1612/30/101624314.png" alt="" width="100" height="117">

-css-

.wcb-chan {

    animation: img-move 6s steps(6, start) infinite;

}

.wcb-chan-nostep {

    animation: img-move 6s infinite;

}

@keyframes img-move {

  to {

    transform: translateX(600px);

  }

}

위의 예에서는 steps(6, end)지정하여 단계마다 표시 위치를 이동합니다. 이에 대해 아래의 예에서는 steps변수없이 일반 애니메이션으로 이동합니다. "움직이지 않아!」라고하는 사람은 f5를 클릭

간편한 나쁜 것 ...군요 w 나도 그렇게 생각하고있었습니다. 괜찮아요, 당황하지 않고 읽기 바란다.

CSS 스프라이트는?

다음 타이틀에도 CSS 스프라이트를 언급 해주십시오. CSS 스프라이트는 여러 이미지를 소집하여 CSS로 표시 위치를 지정하여 표시하는 CSS는 기술의 하나. 이미지의 수를 줄이고 사이트의 표시를 높일 수있는 기술입니다.

a class="sample_spritemenu" href="#">안녕하세요</a>

a.sample_spritemenu{

  font-family: "dotum",Sans-Serif;

  background: url(http://webcreatorbox.com/sample/images/sprite-menu.jpg);

  text-decoration: none;

  width:140px;

  height:30px;

  display: block;

  cursor:pointer;

  padding-top:10px;

  text-align:center;

  color:#fff;

}

a.sample_spritemenu:hover{

  background-position:left bottom;

}

이용하고있는 이미지는 하나이지만, 커서를 맞추면 배경 이미지의 위치가 어긋나 이미지가 변화하고있는 것 같습니다. 

CSS 스프라이트 + steps = 플립 북!

다리게했습니다. 여기에 드디어 타이틀에도 같이, CSS 스프라이트와 steps를 사용한 구현 예를 소개합니다. CSS 스프라이트에 사용되는 이미지의 표시 위치를 지정하는 기술과 steps단계마다 변화를 낳는 기술을 사용하면 플립 북을 구현할 수 버리는 것입니다.

1. 이미지를 준비

우선 애니메이션을위한 이미지를 준비합니다. 이번에는 간단한 예를 들어, 5 개의 프레임으로 변화시켜 보려고합니다. 이 예제에서는 가로 1000px 캔버스를 가로 5 분할했습니다.

2. 배경 이미지로 설정

CSS 스프라이트뿐만 아니라 배경 이미지로 지정합니다.

<div class="wcb-chan"></div>

.wcb-chan {

  background: url(images/wcb-chan-animation.svg) no-repeat;

  width: 200px;

  height: 200px;

}

3. animation을 지정

CSS를 keyframes를 사용하여 애니메이션 종료시에 마지막 프레임이 나타나도록합니다. 하나의 프레임이 200px 전체가 1000px 그래서 keyframes는 마지막 프레임의 왼쪽된다 800px 불구하고 애니메이션이 종료하도록 지정합니다. 또한 animation프로퍼티에서 1 초마다 단계를 밟도록 지정합니다.

.wcb-chan {

  background: url(images/wcb-chan-animation.svg) no-repeat;

  width: 200px;

  height: 200px;

  animation: smile 1s steps(4) infinite;

}

 

@keyframes smile {

  to {

    background-position: -800px 0;

  }

}

4. 완성!

<div class="wcb-chan">

  <p>steps 지정</p>

</div>

<div class="wcb-chan-nosteps">

  <p>steps 없음</p>

</div>

body {

  margin: 30px;

}

/* CSS sprite */

.wcb-chan,

.wcb-chan-nosteps {

  background: url(http://webcreatorbox.com/sample/images/wcb-chan-animation.svg) no-repeat;

  width: 200px;

  height: 200px;

  display: inline-block;

  margin: 0 50px;

}

/* Using steps */

.wcb-chan {

  animation: smile 1s steps(4) infinite;

}

/* Without steps */

.wcb-chan-nosteps {

  animation: smile 1s infinite;

}

/* Both animations are used the same keyframes */

@keyframes smile {

  to {

    background-position: -800px 0;

  }

}

덧붙여서 여기 steps를 사용하지 않은 경우, 옆에 흐르는 이상한 이미지로 표시되어 버리므로주의.

5. 표시 방법을 조정

<div class="wcb-chan"></div>

body {

  margin: 30px;

}

/* CSS sprite */

.wcb-chan {

  background: url(http://webcreatorbox.com/sample/images/wcb-chan-animation.svg) no-repeat;

  width: 200px;

  height: 200px;

  margin: 0 auto;

}

/* Using steps */

.wcb-chan {

  animation: smile .5s steps(4) alternate infinite;

}

.wcb-chan:hover {

  animation-play-state: paused;

}

@keyframes smile {

  to {

    background-position: -800px 0;

  }

}

당연하다면 당연 합니다만 표시하는 속도를 빨리하면 애니메이션도 더 부드럽게 실행됩니다. 그 밖에도 animation-play-state: paused;함께 작동을 멈추거나 alternate를 지정하고 앞뒤로 애니메이션을 만들 버립니다. 위의 예에서는 이전에 비하여보다 빠른 속도 + 앞뒤 + 마우스를 놓으면 움직임이 멈 춥니 다.

animation프로퍼티의 자세한 사용법은 과거 기사 " CSS3 애니메이션에 도전! 색상이 변화하는 배경을 구현하려고 "을 읽어보세요! 여러가지 효과 쓸만합니다.!

호버 때 악센트

실제로 Web 사이트 제작을하는데 사용할 수 있도록 여기에서는 버튼에 커서를 올려 놓으면 아이콘을 움직여보십시오.

span 애니메이션 이미지를 표시합니다.

<a href="#" class="question-link">

  <span></span>Question?

</a>

마찬가지로 애니메이션의 지정. 25 프레임 있지만, 속도를 빨리하고 있기 때문에 부드럽게 표시됩니다. forwards를 지정하여 호버하고있는 동안은 애니메이션의 마지막 프레임이 표시됩니다.

.question-link span {

  background: url(images/question.svg) no-repeat;

  width: 50px;

  height: 50px;

  display: inline-block;

}

.question-link:hover span {

  animation: question .6s steps(24) forwards;

}

 

@keyframes question {

  100% {

    background-position: -1200px 0;

  }

}

완성!

<a href="#" class="question-link">

  <span></span>Question?

</a>

@import url(https://fonts.googleapis.com/css?family=Nunito);

body {

  margin: 30px;

}

.question-link {

  margin: 0 auto;

  text-decoration: none;

  color: #0bd;

    border: 2px solid #0bd;

    border-radius: 10px;

    padding: 5px 20px 5px 0;

  font-family: 'Nunito', sans-serif;

    font-size: 30px;

}

.question-link:hover {

  color: #0d9;

  border-color: #0d9;

}

.question-link span {

  background: url(http://webcreatorbox.com/sample/images/question.svg) no-repeat;

  width: 50px;

  height: 50px;

  display: inline-block;

  position: relative;

  top: 15px;

}

.question-link:hover span {

  animation: question .6s steps(24) forwards;

}

@keyframes question {

  100% {

    background-position: -1200px 0;

  }

}

아이디어 나름으로 여러가지 재미있는 애니메이션 이미지를 만들 수있을 것입니다!

CSS 스프라이트 + steps을 사용한 예

<div class="heart"></div>

.heart {

  width: 100px;

  height: 100px;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;

  background-position: 0 0;

  cursor: pointer;

  animation: fave-heart 1s steps(28);

}

.heart:hover {

  background-position: -2800px 0;

  transition: background 1s steps(28);

}

@keyframes fave-heart {

  0% {

    background-position: 0 0;

  }

  100% {

    background-position: -2800px 0;

  }

}

<link rel="stylesheet" href="http://assets.jamieburleigh.co.uk/experiments/css/font-awesome.min.css">

<h1>Jamie.Burleigh <span>&nbsp;</span></h1>

body {

  font-family:  Consolas, monospace;

  background-color: black;

  font-size: 18px;

}

@keyframes typing {

    from { width: 0 }

    to { width:8.75em }

}

@keyframes blink-caret {

    from, to { border-color: transparent }

    50% { border-color: white }

}

.wrapper {

  margin: 3em auto;  

}

h1 {

  width: 16ch;

  width: 8.75em;

  color: #18e018;

  white-space: nowrap;

  position: relative;

  overflow:hidden;

  animation: typing 4s steps(16, end); 

}

h1:before {

  font-family: FontAwesome;

  color: #FFF;

  font-size: 24px;

  content: "\f054";}

h1 span {

  border-right: .1em solid;

  color: #FFF;

  position:absolute;

  top:0;

  right:0;

  width:0;

  animation: blink-caret 1s step-end infinite;

}

i {

  color: white;

  float: left;

  font-size: 2.3em;

}

GIF 애니메이션과의 차이

"파라 파라 만화 스타일 애니메이션이라면 GIF 애니메이션으로 좋은 것은 아닌지?」라고 생각하신 분들도 많을 것으로 생각합니다. 나도 처음에는 그렇게 생각하고있었습니다. 마지막으로 GIF 애니메이션과의 차이점을 몇 가지 소개합니다.

GIF 애니메이션은 물론 GIF 형식의 이미지 만 사용할 수 있습니다. 투과 수 있지만, 가장자리 톱니가 궁금하거나 레티 나 디스플레이로 깨끗이 표시하는 것은 어렵습니다. 이번에 소개 한 방법을 사용하면 PNG 이미지는 물론 레티 나 디스플레이도 깨끗하게 볼 수있는 SVG 이미지도 사용할 수 있습니다.

애니메이션의 속도는 물론 페이지가로드 된 후 몇 초 후에 애니메이션을 시작할지 등의 타이밍도 CSS로 조정할 수 있습니다. 또한 기사에서도 소개했던대로 animation-play-state프로퍼티에서 정지시키는 것도 가능하다.