[css] css 애니메이션

 

 

목차

 

 

 

 

📌  css 애니메이션

css 애니메이션은 여러 개의 css 스타일을 부드럽게 전화시켜준다.

@keyfremes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다.

 

 

📍 @keyframes

 

@keyframes를 지정하는 방법

 

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

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

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

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

 

@keyframes를 지정한 예시

 

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

	50% {
		transform : rotate(180deg)
	}

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

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

 

 

📍 animation 속성

 

• animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
  • animation-name : 애니메이션의 중간 상태를 지정하는 이름.  @keyframes 블록에 작성
  • animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
  • animation-delay : 애니메이션의 시작을 지연시킬 시간 지정
  • animation-direction : 애니메이션 재생 방향을 지정
  • animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
  • animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
  • animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
  • animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정

 

 

animation-name, duration

 

애니매이션의 이름과 재생 시간을 작성해 주면 된다.

이 속성으로 애니매이션이 재생되진 않지만, name과 duration은 반드시 지정해 주어야 한다.

 

#logo {
	animation : lotate;
}
//또는
#logo {
	animation-name : lotate;
}
// 기본값이 0 이므로 지정해주지않으면 재생되지 않는다.
#logo {
	animation : lotate 3s ;
}
// 총 정리
#logo {
	animation-name : lotate;
	animation-duration : 3s;
}

 

 

animation-delay

 

애니메이션 재생을 미룰 시간을 지정

 

#logo {
	animation : lotate 3s 3s ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-delay : 3s;
}

 

animation-direction

 

애니메이션 재생 방향을 지정

 

• normal : 기본 값. 재생이 끝나면 처음부터 다시 재생합니다.
• reverse : 역방향으로 재생합니다.
• alternate : 순방향부터 역방향을 번갈아가며 재생합니다.
• alternate-reverse : 역방향부터 순방향을 번갈아가며 재생합니다.

 

#logo {
	animation : lotate 3s reverse ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-direction : alternate;
}

 

 

animation-iteration-count

 

애니메이션이 몇 번 재생될지 지정, 기본 값은 1

 

#logo {
	animation : lotate 3s infinite ;
/* 애니메이션이 무한 반복 됩니다. */
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-iteration-count : 3 ;
/* 애니메이션이 3번 반복 됩니다. */
}

 

animation-play-state

 

애니메이션이 재생 상태를 설정

 

#logo {
	animation : lotate 3s pause ;
}

#logo {
	animation-name : lotate;
	animation-duration : 3s;
	animation-play-state : pause ;
}

 

 

animation-timing-function

 

애니메이션의 진행 속도를 설정

 

 

animation-fill-mode

 

애니메이션 재생 전 후의 상태를 지정

 

• none : 기본 값. 재생중이 아닌 경우 요소의 스타일을 유지합니다.
• forwards : 재생중이 아닌 경우 마지막 키프레임 스타일을 유지합니다.
• backwards : 재생중이 아닌 경우 첫 번째 키프레임 스타일을 유지합니다.
• both : 재생 전에는 첫 번째 키프레임 스타일을, 재생 후에는 마지막 키프레임 스타일을 유지합니다.

 

🔗  @keyframes 중간값

중간값은 애니메이션 재생 시간을 기준으로 함

 

#logo {
	**animation-name : lotate;**    /* lotate 라는 이름의 키프레임 애니메이션을 */
	animation-duration : 3s;               /* 3초 동안 재생하며, */
	animation-iteration-count : infinite;  /* 애니메이션을 무한 반복하고, */
    animation-timing-function : linear;    /* 선형으로 재생합니다. */
}

/* 아래와 같이 일괄 작성해도 동일하게 적용됩니다. */

#logo {
	animation : **lotate** 3s infinite linear;
}