[CSS] animation

zhunhe·2021년 10월 5일
0

animation은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜주는 속성입니다.
비슷한 속성으로 transition이 있는데요. transition과는 아래와 같은 차이가 있습니다.

💡 transition과의 차이
1. transition의 경우에는 유저의 액션(hover)이 트리거가 되어 동작하는데 animation은 유저의 액션이 없어도 동작시킬 수 있습니다.
2. transition은 A→B로 상태를 변화시키는데 animation은 A→B→C→D 다수의 스타일로 변화시키는 것도 가능합니다.

@keyframes

animation 속성은 @keyframes에서 어떻게 변화시킬지 작성해 놓고 작성한 내용을 네임태그를 불러서 사용하게 됩니다.

.box {
  width: 100px;
  height: 100px;
  border: 10px solid seagreen;
  background-color: rgb(204, 253, 225);
  border-radius: 30px;
  
  animation: slidein 2s infinite;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
  • 위와 같이 시작상태와 종료상태를 지정해줄 수도 있고 아래와 같이 중간중간 어떤 상태인지를 지정해줄 수도 있습니다.
@keyframes slidein {
  /* width: 100%는 초기값과 같으므로 생략 가능 */
  0% { width: 100% }
  /* 시간이 50%정도 흘렀을 때 */
  50% { width: 300%; }
  100% { width: 100% }
}

animation-name

어떤 @keyframes를 사용할지 지정해주는 속성입니다.
animation-name에 들어갈 이름은 영어 소문자(a-z), 숫자(0-9), 언더바(_), 하이픈(-)만으로 이루어져야 합니다.

animation-duration

@keyframes가 한 사이클 완료하는데 걸리는 시간을 지정해주는 속성입니다.
시간을 음수값으로 설정해줄 경우 animation 선언이 무시되고 동작하지 않게 됩니다.

animation-delay

animation이 시작되기까지 지연시간을 설정해줄 수 있는 속성입니다.
시간을 음수값으로 설정하는 것도 가능합니다. 음수값으로 지정한 경우 시작은 바로 되지만 animation 주기 도중부터 시작하게 됩니다.

animation-timing-function

animation의 일정구간을 빠르게 보여줄지 스텝을 지정하여 딱딱 끊어지게 보여줄지 설정해줄 수 있는 속성입니다.

animation-iteration-count

animation의 반복 횟수를 지정해줄 수 있는 속성입니다. 기본값은 infinite(무한)이며 1.5와 같이 소수를 설정할 수도 있습니다.

animation-direction

animation을 정방향으로 재생할지 역방향으로 재생할지 설정할 수 있는 속성입니다.

  • normal: 정방향
  • reverse: 역방향
  • alternate: 정방향-역방향 반복
  • alternate-reverse: 역방향-정방향 반복

animation-play-state

running, paused 두 값을 설정해줄 수 있는 속성입니다. (기본값은 running)
아래 CSS예시와 같이 마우스를 올리면 일시정지 하도록 설정해줄 수 있습니다.

.box1 {
  animation: rotate;
}
.box1:hover {
  animation-play-state: paused;
}

animation-fill-mode

animation 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정할 수 있는 속성입니다.

  • none: animation이 적용될 때만 @keyframes의 스타일을 가져다 쓰는 값입니다. (기본값)
  • forwards: 100% 혹은 to에 해당하는 스타일을 그대로 유지하는 값입니다.
  • backwards: delay시간 동안 @keyframes의 0% 혹은 from에 있는 스타일을 적용하는 값입니다.
  • both: forwards와 backwards 둘 다 적용됩니다.

animation(shorthand)

animation-name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state를 한번에 설정해줄 수 있는 속성입니다.
시간 속성 중 앞에 나오는 것이 duration 뒤에 나오는 것이 delay가 됩니다.

기본값
1. animation-name: none
2. animation-duration: 0s
3. animation-timing-function: ease
4. animation-delay: 0s
5. animation-iteration-count: 1
6. animation-direction: normal
7. animation-fill-mode: none
8. animation-play-state: running

0개의 댓글