CSS 애니메이션

이번 포스팅에서는 CSS 애니메이션을 공부하면서, 
keyframe 사용 법 및 다양한 애니메이션 속성에 대해 공부하겠습니다. 

 

CSS 애니메이션이란?

• 여러 개의 CSS 스타일을 부드럽게 전환해준다. 
• @keyframes 키워드 활용 시 시간 순서대로 정밀하게 짜여진 애니메이션 만들기 가능

 

@keyFrames 활용

1. CSS로 키프레임 블록 만들기 

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

 

<회전하는 키프레임 애니메이션>

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

 

animation 속성?

띄어쓰기로 쭉 나열하면 여러 속성들을 한 번에 지정 가능 

 

<종류>

• animation-name : 애니메이션의 중간 상태를 지정하는 이름.  @keyframes 블록에 작성
  
  
• animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정 (기본값 0)
  
  
• animation-delay : 애니메이션이 시작을 지연시킬 시간 지정
  
  
• animation-direction : 애니메이션 재생 방향을 지정
  
  (normal, reverse, alternate, alternate-reverse)
• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  (1, infinite, 소수점 : 중간에 처음상태로 돌아감)
  
  
• animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
  (running, pause)
  
  
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  (진행 속도 linear, ease, ease-in, ease-out, ease-in-out)
• animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정
  (none, forwards, backwards, both)