TIL - CSS (animation)

animation의 원리

animation

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

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

1. transition 속성 활용

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

2. animation 속성과 keyframe 활용

   시작하기 위한 이벤트가 필요 없다.
   그리고 애니메이션의 시작, 정지, 반복까지 제어가 가능

   but, @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야함
   → 조금 귀찮고 번거롭다!

CSS 애니메이션을 만들 때…

1. transition으로 만들 수 있는 것은, transition 안에서 해결한다.
2. transition으로는 만들 수 없는 애니매이션을 animation과 keyframes로 만든다.

keyframes

• keyframes 앞에는 @가 붙는다.
• CSS 애니메이션 의 시작, 중간, 끝 등의 중간 상태를 정의한다
  

@keyframes 애니메이션이름 {
	from {
		left : 0;
	}
	to{
		left : 200px;
	}
}

animation

animation 관련 속성

• animation-name 어떠한 keyframes를 요소에 적용할 것인지 지정

animation-name: moveRight

• animation-duration 애니메이션을 한 번 재생하는데 걸리는 시간을 설정

animation-duration: 2s

• animation-direction 애니메이션 재생 방향을 정의 (정방향/역방향)
  • normal : 정방향
  • reverse : 역방향
  • alternate : 정방향 (단, 정방향/역방향을 번갈아 재생)
  • alternate-reverse : 역방향(단, 역방향/정방향을 번갈아 재생)

animation-direction: alternate | normal | reverse | alternate-reverse

• animation-iteration-count 애니메이션 재생 횟수를 정의

animation-iteration-count : infinite | 3

• animation-timing-function 애니메이션 재생 패턴을 정의하며,
  transition-timing-function과 유사하다.

animation-timing-function : ease-in-out

❗️animation-timing-function/transition-timing-function에 대한 재생 패턴은 링크를 참고해주세요!

• animation-delay 애니메이션 시작을 얼마나 지연할 지 설정

animation-delay : 2s

animation 단축속성

참고

[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui