[CSS 애니메이션] @keyframes 사용하기

@keyframes

진행도(%)에 따라 각각의 스타일을 부드럽게 전환하여 애니메이션을 만든다.

@keyframes slidein {
	0% { /*또는 from*/
    CSS속성: 속성값;
    }
  
    50% { /*중간값*/
    ...
    }
      
    100%{ /*또는 to*/
    ...
    }
}

키프레임 애니메이션을 적용시키고 싶은 요소에 animation-name: 애니메이션이름 으로 불러올 수 있다.
또는, animation속성의 첫 번째 값으로 작성한다.

div.title {
  animation: slidein
  /*애니메이션을 사용하려면 다른 속성을 추가로 작성해야 한다.*/
}

animation 속성

animation 속성에 띄어쓰기로 각각의 속성값을 적용시키거나, 개별적으로 작성한다.

• animation-duration: 기본값 0, 애니메이션 한 싸이클의 시간을 설정한다.
  animation 속성의 두 번째 값이다.

div.title {
  animation-name: slidein;
  animation-dutation: 3s;  
  /*또는 animation 속성으로 한번에 지정*/
  animation: slidein 3s;
}

• animation-delay: 기본값 0, 애니메이션 재생 시작에 지연을 준다.

div.title {
  animation-name: slidein;
  animation-dutation: 3s;
  animation-delay: 1s;
  /*또는 animation 속성으로 한번에 지정*/
  animation: slidein 3s 1s;
}

• animation-direction: 기본값 normal, 애니메이션 재생 방향을 지정한다.
  • reverse: 역방향
  • alternate: 순방향과 역방향 번갈아 가며 재생
  • alternate-reverse: 역방향과 순방향 번갈아 가며 재생

div.title {
  animation-name: slidein;
  animation-dutation: 3s;
  animation-direction: reverse;
  /*또는 animation 속성으로 한번에 지정*/
  animation: slidein 3s reverse;
}

• animation-iteration-count: 기본값 1, 애니메이션의 반복재생 횟수 설정
  • infinite: 무한반복
  • 한 싸이클의 재생 시간 * count한 시간만큼 재생하고 처음 상태로 돌아간다.

div.title {
  animation-name: slidein;
  animation-dutation: 3s;
  animation-iteration-count: 3; /*3번 반복*/
  /*또는 animation 속성으로 한번에 지정*/
  animation: slidein 3s 3;
}

공식문서

@keyframes 중간값

한 싸이클의 재생 시간(animation-duration)에서 중간값(%)만큼 해당 애니메이션을 실행한다.
3s일 경우, 중간값 50%는 3초의 50%인 1.5초동안 실행된다.