[CSS] Animation 속성 정리, 참고 사이트 추천

 

자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다.

 

1. animation-name : 애니메이션 이름

@keyframes에 애니메이션을 정의할 이름

2. animation-duration : 애니메이션 재생시간

초기값(default): 0s

* 초(s), 밀리초(ms) 단위로 설정할 수 있습니다.

3. animation-timing-function : 애니메이션 진행 스타일

초기값(default): ease

ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, steps, cubic-beszier

4. animation-delay : 애니메이션 지연시간

초기값(default): 0s

* 초(s), 밀리초(ms) 단위로 설정할 수 있습니다.

5. animation-direction : 애니메이션 재생 방식

초기값(default): normal

normal, reverse, alternate, alternate-reverse

6. animation-iteration-count : 애니메이션 반복 횟수

초기값(default): 1

1,... , infinite

7. animation-fill-mode : 애니메이션 시작 전, 후 어떤 키프레임으로 유지할 것인지

초기값(default): none

none, forwards, backwards, both

8. animation-play-state : 애니메이션 자동 실행할 것인지 

초기값(default): running

running, paused

 

 

속성들을 활용해서 CSS에 @keyframes를 정의해 보겠습니다.

.target{
  animation: fadeIn .3s linear .1s; /* 애니메이션 이름, 재생시간, 재생 스타일, 지연시간 */
}

/* from, to로 정의하기 */
@keyframes fadeIn {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.target{
  animation: fadeIn .3s linear .1s; /* 애니메이션 이름, 재생시간, 재생 스타일, 지연시간 */
}

/* 퍼센트로 정의하기 */
@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

 

 

 

 

애니메이션 참고 사이트 (Animation Reference Site)

1. codepen

https://codepen.io/

CodePen

 

작업한 코드를 게시해서 프리뷰로도 활용할 수 있는 소셜 사이트라고 보시면 됩니다.

저는 애니메이션이나 자바스크립트 서칭용으로 자주 이용하고 있습니다. 

다른 이들의 코드를 참고하여 커스텀해서 활용하기에 유용한 사이트입니다.

 

 

2. GSAP(GreenSock)

https://greensock.com

GreenSock

주요 브라우저에서 복잡한 애니메이션의 퍼포먼스를 빠르고, 매끄럽게 구현해 주는 자바스크립트 애니메이션 라이브러리입니다.

Showcase 페이지를 보시면 GSAP를 활용한 웹사이트 갤러리인데, 애니메이션 트렌드도 읽을 수 있어서 추천드립니다. 

 

 

 

 

 

 

이렇게 CSS Animation 속성들에 대해서 간단하게 살펴보았습니다.