CSS 공부를 계속 하면서 animation 부분을 오랜만에 봤는데 어떤것인지는 기억나지만 어떻게 했는지는 기억이 하나도 안나서( 당시 배우고 직접 써본적이 없었음.. ) 제대로 정리해보려고 함!

---

🔎animation

• 요소에 적용되는 css 스타일을 다른 css 스타일로 전환시킬 수 있음
• JavaScript 없이 요소에 애니메이션 효과를 적용 가능
• 구성 : 애니메이션을 나타내는 css 스타일 + 애니메이션의 중간상태를 나타내는 keyframes

1. @keyframes

• 0%(from)은 시작점, 100%(to)는 종료시점으로 두개 이상의 시점에 따라 중간 상태를 결정

@keyframes animation-name {
	0% {}
	50% {}
	100% {}
}

2. animation 하위속성

• 중간 상태를 결정하는 것이 아닌 animation 자체의 여러 속성을 지정함

animation-name

• animation의 이름

animation-duration

• animation 한 주기동안 걸리는 시간

animation-timing-function

• animation 진행방식
  ease (기본값) : 처음에서 중간으로 갈 수록 속도 증가 ~ 끝에 다시 느려짐
  linear : 처음부터 끝까지 균일한 속도
  steps(n) : n개의 단계로 끊어서 보여줌
  크롬 개발자 도구에서 다양한 속성 확인 가능
  step-start : steps(1, start)와 같음, animation 마지막 프레임으로 이동
  step-end : steps(1, end)와 같음, animation 첫 프레임으로 이동

❓궁금증
개인 프로젝트를 할 때 JS를 이용해 자동 이미지 슬라이더를 만들었는데, 작동은 했으나 이미지의 크기가 변할 때 반응형으로 만들 수가 없었고, 뭔가 요상했음💣
구글링 후 css animation으로만 슬라이더를 만든 포스팅을 발견!
내 css 코드에 적용시키고 관련 개념들 공부해봄 ... ✏️

animation-delay

• animation 시작까지 지연되는 시간
• 음수값 넣으면 그 시간만큼 지났을 때 시점부터 animation 작동

animation-iteration-count

• 재생 횟수
  infinite : 영원히 반복
  0.5 : 절반만 재생
  

animation-direction

• 재생 방향
  normal (기본값) : 정방향으로 재생
  reverse : 역방향으로 재생
  alternate : 정방향 - 역방향 반복 재생
  alternate-reverse : 역방향 - 정방향 반복 재생
  

animation-play-state

• animation 재생 여부 설정
  paused : 정지
  running : 재생

❓궁금증
웹페이지 로드되면 딱 한번 애니메이션 실행하게 하고 싶으면?

/* 지연시간 0 */
animation-delay: 0;
/* 재생 횟수 1 */
animation-iteration-count: 1;

이 두 속성값을 주면 됨!
적용예시 코드 1

적용예시 코드 2