[CSS] 다양한 타이밍 함수를 활용한 동적 애니메이션 효과 모음

Doyeon0430 | 2023년 08월 05일

이번시간에는 애니메이션이 적용되는 다양한 타이밍 함수를 살펴보겠습니다.

CSS에서 사용하는 기본 구조는 [animation: move 3s ease infinite] 이런식으로 구성되어 있습니다.

move는 키프레임에서 정의한 이름을 사용합니다.

3s는 애니메이션이 실행되는 소요시간입니다.

ease는 타이밍 함수로 움직이는 모션을 나타냅니다.

infinite는 애니메이션이 무한 반복하도록 설정합니다.

움직이는 애니메이션 - 타이밍 함수 1
움직이는 애니메이션 - 타이밍 함수 2
움직이는 애니메이션 - 타이밍 함수 3

1. 움직이는 애니메이션 - 타이밍 함수 1

ease라는 코드를 사용하며 빠르게 시작하여 느리게 끝나는 타이밍 함수입니다.

linear라는 코드를 사용하며 시작부터 끝까지 일정한 속도로 진행하는 타이밍 함수입니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/XWyGeOx"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. 움직이는 애니메이션 - 타이밍 함수 2

ease-in라는 코드를 사용하며 시작 부분에는 빠르게 가속되는 타이밍 함수입니다.

ease-out라는 코드를 사용하며 끝 부분에는 빠르게 감속되는 타이밍 함수입니다.

ease-in-out라는 코드를 사용하며 시작과 끝 부분에서 각각 가속과 감속이 발생하는 타이밍 함수입니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/YzRgroX"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. 움직이는 애니메이션 - 타이밍 함수 3

step-start라는 코드를 사용하며 각 지점마다 시작 부분에서 새로운 위치로 즉시 이동하는 타이밍 함수입니다.

step-end라는 코드를 사용하며 각 지점마다 끝 부분에서 새로운 위치로 즉시 이동하는 타이밍 함수입니다.

steps(5,end)라는 코드를 사용하며 스텝 수를 5로 설정하고 끝 부분으로 이동하는 타이밍 함수입니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/rNQRGEq"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

댓글이 없습니다.

간편 댓글 작성