@keyframes

@keyframes란 => 타임라인 안의 하나의 스태이지(구간)들

* 0% 시작 => 100% 끝
@keyframes example {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

* from to 로도 사용가능
@keyframes example {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

* to로만 쓸수도 있음
@keyframes example {
  to {
    opacity: 0;
  }
}

Animation 속성

animation 속성은 예전에 @keyframes라고 불리며 CSS 선택자 안에서 존재했었습니다.
animation은 여러개의 속성을 가질 수 있습니다.

• animation-name: @keyframes 이름 (예시에서는 tutsFade를 사용함)
• animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간
• animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier
• animation-delay: 애니메이션이 시작하기 전 지연시간
• animation-iteration-count: 반복 횟수
• animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
• animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )

길게 늘여쓰는 경우

.example {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

짧게 줄여쓰는 경우

.example {
  animation: tutsFade 4s 1s infinite linear alternate;
}

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}