Css를 이용한 애니메이션 다루기

• 1 animation
• 2 @keyframes
• 3 animation-duration
• 4 animation-timing-function
• 5 animation-delay
• 6 animation-direction
• 7 animation-fill-mode
• 8 animation-play-state

기본 설명

@keyframes

어떤 모양에서 어떤 모양으로 바꿀지 정합니다. 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다.

@keyframes name {
  0% { ... }
  n% { ... }
  100% { ... }
}

animation-name

어떤 @keyframes을 사용할지 정합니다. 예제에서는 big을 사용합니다.

animation-duration

animation-duration: time | initial | inherit

애니메이션의 총 시간을 정합니다. 예제에서는 2초 동안 애니메이션을 시작하고 끝냅니다.

animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

애니메이션 진행 속도를 정합니다. 예제에서는 등속으로 진행합니다.

animation-delay

animation-delay: time | initial | inherit

애니메이션을 시작하기 전에 대기하는 시간을 정합니다. 예제에서는 2초 대기 후 시작합니다.

animation-iteration-count

애니메이션 반복 횟수를 정합니다. 예제에서는 4회 반복합니다.

animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

애니메이션 진행 방향입니다. 예제에서는 정방향 → 역방향 → 정방향 → 역방향 → …으로 진행하도록 정했습니다.

animation-fill-mode

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

애니메이션을 마친 후 어떤 상태로 만들지 정합니다.

animation-play-state

animation-play-state: running | paused | initial | inherit;

애니메이션을 진행할지 멈출지 정합니다. 예제에서는 진행하는 것으로 설정했습니다.

여기의 예제는 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations 에서 좀더 자세히 보실 수 있습니다.

간단한 애니메이션 예제

@keyframes 을 이용한 애니메이션 실행

• css

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

• p tag를 3초동안 slidein 으로 정의된 @keyframes 을 실행한다.
• @keyframes 에는 from 에서 시작하여 to 까지 3초동안 움직인다.

See the Pen css 를 이용한 애니메이션 다루기 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

중간 상태 추가

• css

75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

• from 에서 시작하여 75% 까지 올때까지 폰트를 키우다가 다시 to 까지 변경됩니다.

See the Pen css 를 이용한 애니메이션 다루기 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

애니메이션 반복하기

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

• animation-iteration-count: infinite; 를 추가하여 무한으로 움직이게 하기

See the Pen css 를 이용한 애니메이션 다루기3 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

앞뒤로 움직이기

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

• animation-direction: alternate; 를 추가하여 from->to, to->from 으로 움직이게 하기

  See the Pen css 를 이용한 애니메이션 다루기3 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

javascript를 활용한 간단한 모션

사용자가 액션을 취할때 특정 애니메이션이 실행되도록 한 예제입니다.
on, off class를 이용하여 처리하였습니다.

See the Pen css 를 이용한 애니메이션 다루기4 by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

한줄표기

아래와 같이 한줄표기도 가능하다.

[name duration timing-function delay iteration-count direction fill-mode play-state]
animation: slidein 3s linear 2s;