Skip to main content

animation

  • 여러 스타일 전화 및 애니메이션 효과를 적용
  • JS 없이 요소에 애니메이션 효과를 적용할 때 사용
  • 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성
info

transition vs animation

  • transition: 요소의 상태가 변경되어야 애니메이션을 실행
  • animation: 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행

@keyframes​

  • 두개 이상의 애니메이션 중간 상태를 설정
  • 0%는 시작점, 100% 종료시점을 의미, from, to 속성으로 사용 가능.
/* from,to 속성 */
@keyframes animation-name {
  /* animation-name부분은 원하는 이름을 설정하여 사용 가능*/
  /* 영문 소문자, 문자열, 언더바(_), 하이픈(-)을 사용 */
  /* , 으로 여러 가지 선택 가능 */
  from {
  }
  to {
  }
}

/* % 속성 사용 */
@keyframes animation-name {
  0% {
  }
  50% {
  }
  100% {
  }
}

animation-name​

  • @keyframes 뒤에 들어가는 이름을 지정하는 속성

animation-duration​

  • 애니메이션이 한 사이클을 완료하는데 걸리는 시간을 설정
  • 음수 값은 애니메이션이 실행 X

animation-timing-function​

  • 애니메이션이 진행되는 방식 설정
  • ease(default 값): 애니메이션 중간으로 갈수록 속도가 증가, 끝으로 갈수록 느려짐.
  • linear: 균일한 속도 움직임
  • steps(n): n개의 단계

animation-delay​

  • 애니메이션이 시작될 시간을 지정
  • 속성값을 음수를 넣게되면 그 값의 양수 값이 지난 시점부터 애니메이션 시작

animation-iteration-count​

  • 애니메이션 재생 횟수를 설정
  • 속성값: infinite 무한 반복, 0.5 절반 재생

animation-direction​

  • normal: 기본값. 정방향 재생
  • reverse: 역방향 재생
  • alternate: 정방향, 역방향 반복
  • alternate-reverse: 역방향, 정방향 반복

animation-fill-mode​

  • 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
  • normal: 기본값
  • forwards: 요소의 기존 스타일로 시작. 애니메이션 마지막 속성 값 유지
  • backwards: 첫 번째 정의된 애니메이션 값으로 시작. 요소의 기존 스타일로 돌아감
  • both: 첫 번째 정의된 값으로 시작. 마지막 값 유지

animation-play-state​

  • 애니메이션 재생 여부
  • paused 정지, running 재생

animation 단축 속성​

.box {
  animation: name 3s ease 1s infinite reverse both running;
  /* 이름 / 실행 시간 / 애니메이션 시간별 동작 / 몇 초후에 애니메이션 시작 / 재생횟수 / 방향 /실행 전&후 상태/ 재생 여부 */
}