Animation

Animation 이란?

연속되는 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법

CSS를 이용해서 애니메이션을 만드는 방법

1. transition 속성 활용

   • 특정 이벤트(hover 등)를 기점으로 작동

2. animation 속성과 keyframe 활용

   • 시작하기 위한 이벤트가 필요없음
   • 애니메이션의 시작, 정지, 반복까지 제어 가능

@keyframes 란?

• CSS 애니메이션의 시작, 중간, 끝 등의 중간 상태를 정의
• 애니메이션 속성을 이용하여 요소에 적용

/* keyframe 작성 방법 */
@keyframes 애니메이션이름1 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}

@keyframes 애니메이션이름2 {
	0% {
		left : 0;
	}
	50%{
		left : 200px;
	}
	100%{
		top : 200px;
		left :  200px;
	}
}

Animation 관련 속성들

animation-name

/*어떠한 keyframes를 요소에 적용할 것인지 지정할 때 사용*/
animation-name: moveRight

animation-duration

/*애니메이션을 한 번 재생하는 데 걸리는 시간 설정*/
animation-duration: 2s

animation-direction

애니메이션 재생 방향 정의 (정방향 / 역방향)

/*정방향*/
animation-direction: normal

/*역방향*/
animation-direction: reverse

/*정방향-역방향 번갈아 재생*/
animation-direction: alternate

/*역방향-정방향번갈아 재생*/
animation-direction: alternate-reverse

animation-iteration-count

/*애니메이션 재생 횟수 설정*/
animation-iteration-count: infinite
animation-iteration-count: 3

animation-timing-function

애니메이션 재생 패턴을 설정
transition-timing-function과 유사함

animation-timing-function: linear   /*동일한 속도로 이벤트 진행*/
animation-timing-function: ease-in  /*처음엔 느리게 시작, 마지막엔 빠르게 진행*/
animation-timing-function: ease-out /*처음엔 빠르게 시작, 마지막은 느리게 진행*/

animation-timing-function: ease  
/*처음엔 천천히 시작, 중간에 빨라지고, 마지막엔 느리게 진행*/
/*ease-in-out과 동일한 형태지만 보다 가파르게 진행*/

animation-timing-function: ease-in-out
/*처음엔 천천히 시작, 중간에 빨라지고, 마지막엔 느리게 진행*/
/*ease와 동일한 형태지만 보다 완만하게 진행*/

animation-delay

애니메이션 시작의 지연시간 설정

animation-delay : 2s

animation 단축 속성

애니메이션 카테고리에 속한 속성들도 단축 속성으로 모아서 지정 가능
단축 속성을 사용할 땐 순서에 유의

/*animation: name duration timing-function delay iteration-count 
dirction*/
animation: moveRight 0.4s linear 1s infinite alternate

codepen example(하트, 별, 마우스, 소용돌이 애니메이션💫)