CSS 애니메이션 만들기 (1) 준비 / 기초

CSS로 간단한 애니메이션을 만들 수 있습니다. 자바스크립트가 없어도 각각의 요소들이 부드럽게 변하거나 이동하거나 크기가 변하는 등의 애니메이션을 만들어 줄 수 있는데요. 각 요소 즉 엘리먼트에 적용되는 애니메이션을 위해 필요한 것들을 우선 살펴보겠습니다.

 

CSS 애니메이션의 장점

자바스크립트가 필요 없습니다. 가벼운 애니메이션을 만들 때 자바스크립트도 많이 사용되고 관련 소스도 많지만 잘 안될 때도 있고 개발자의 영역이라 디자이너가 스스로 통제하지 못할 경우도 있습니다. 반면 CSS 애니메이션은 렌더링이 부드럽고 브라우저에서 효율적인 성능을 내줍니다. 자바스크립트 없이도 애니메이션 속성을 지정하고 총시간, 반복 여부도 지정해줄 수 있습니다. 일일이 키프레임을 만들어야하는 것이 아니라서 관리도 수월하죠. 애니메이션의 처음과 끝부분만 관리하면 중간 부분은 자동으로 처리가 되는 것입니다. 

 

 

animation 속성의 하위 속성

• animation-delay : 구성요소가 로드된 후 애니메이션이 시작될 시점을 지정합니다.
• animation-direction 애니메이션이 끝난 다음 다시 처음부터 시작할 것인지 아니면 반대방향으로 진행하게 할 것인지를 지정합니다.
• animation-duration 애니메이션이 진행되는 한사이클의 시간입니다.
• animation-iteration-count 애니메이션의 반복 횟수를 지정합니다. 무한 반복도 가능합니다(infinite)
• animation-name 애니메이션의 중간 상태 지정 @keyframes 규칙에 따릅니다
• animation-play-state 애니메이션 멈춤 및 시작.
• animation-timing-function 애니메이션이 전환 될 때 어떤 시간 인터벌을 갖게할 것인지 지정할 수 있습니다.
• animation-fill-mode 애니메이션이 처음 시작할 때 그리고 마지막으로 종료 후 어떤 값을 적용하게 할 것인지 지정합니다.

 

@keyframes 규칙 이용해서 움직이는 텍스트 만들기

@keyframes를 이용하면 엘레먼트가 언제쯤 등장에서 처음에는 어떻고 마지막엔 어떻게 되는지를 저정해줄 수 있습니다. 지정은 Percentage 를 이용하는데요. 0%-100%에 이르는 동안 어떻게 되어야하는지를 지정해주는 것이죠. %대신에 from, to를 쓸 수도 있습니다.

 

간단히 예제를 볼게요.

 

#testani {
  animation-duration: 5s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 500%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

위와 같이 testani라는 애니메이션을 만듭니다. 5초동안 진행되는 duration을 지정했줬구요. animation-name으로 slidein 이라고 해줬습니다. 그리고 @keyframes 에  slidein을 지정해주고 시작은 화면 바깥부터 시작해서 화면 맨 왼쪽까지 들어올 수 있도록 margin 을 줬습니다. 

 

Body 부분  html 소스입니다.

Body에서 p 태그에 id="testani" 를 적어주어 css가 적용되도록 처리해주면 됩니다. 

<h1>CSS ANIMATION TEST</h1>
<p id="testani">간단히 CSS로 애니메이션 만들기. <br>
    화면 바깥에서 부터 텍스트가 브라우저를 가로질러서 왼쪽 끝까지 부드럽게 들어오는 텍스트 애니메이션입니다.
</p>

아래와 같이 작동합니다.

CSS 만으로 자바스크립트 없이 애니메이션 만들기 / 센스프레스

계속해서 반복되도록 하려면 animation-iteration-count: infinite;를 추가합니다. 애니메이션을 양방향으로 움직이도록, 즉 왔던 방향으로 다시 돌아가는 것을 반복하려면 animation-direction: alternate;를 추가합니다. 

애니메이션 요소가 추가되면 다음과 같이 움직입니다.

 

 

마치며,

간단히 CSS 만으로 텍스트를 움직이는 애니메이션을 만들어봤습니다. 보다 자세한 내용은 MDN web doc을 참고하시면 되겠습니다.

 

고맙습니다.