[CSS]CSS 주요 애니메이션 속성들과 설명

 

CSS 애니메이션을 구성하는 여러 속성이 있습니다. 각각의 속성은 애니메이션의 동작을 세밀하게 조정하는 데 사용됩니다. 여기서는 주요 애니메이션 관련 속성을 설명합니다.

 

주요 애니메이션 속성들

@keyframes

• 애니메이션의 중간 상태를 정의하는 데 사용됩니다.
• @keyframes는 애니메이션의 이름과, 각 프레임(0%에서 100%까지)의 스타일을 정의합니다.

@keyframes animationName {
    0% { /* 시작 상태 */ }
    100% { /* 끝 상태 */ }
}

animation

• 애니메이션을 한 줄로 정의할 수 있는 단축 속성입니다. 여러 개의 개별 애니메이션 속성을 포함할 수 있습니다.
• 예: animation: animationName 2s linear 1s infinite alternate;

animation-name

• 사용할 애니메이션의 이름을 지정합니다.

animation-name: exampleAnimation;

animation-duration

• 애니메이션의 지속 시간을 설정합니다.
• 시간 단위(s: 초, ms: 밀리초)를 사용합니다.

animation-duration: 4s;

animation-timing-function

• 애니메이션의 속도 곡선을 지정합니다.
• 값: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

animation-timing-function: ease-in-out;

animation-delay

• 애니메이션이 시작되기 전에 지연 시간을 설정합니다.

animation-delay: 1s;

animation-iteration-count

• 애니메이션이 반복되는 횟수를 지정합니다.
• 값: 숫자, infinite

animation-iteration-count: infinite;

animation-direction

• 애니메이션이 재생되는 방향을 설정합니다.
• 값: normal, reverse, alternate, alternate-reverse

animation-direction: alternate;

animation-fill-mode

• 애니메이션이 실행되기 전과 후에 대상 요소의 스타일을 어떻게 적용할지 설정합니다.
• 값: none, forwards, backwards, both

animation-fill-mode: forwards;

animation-play-state

• 애니메이션의 재생 상태를 제어합니다.
• 값: running, paused

animation-play-state: paused;

예제

아래 예제는 위의 모든 속성을 포함하여 설명합니다.

@keyframes exampleAnimation {
    0% {
        transform: translateX(0);
        background-color: red;
    }
    50% {
        transform: translateX(200px);
        background-color: yellow;
    }
    100% {
        transform: translateX(0);
        background-color: red;
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: exampleAnimation 4s ease-in-out 1s infinite alternate forwards;
}

설명

• animation-name: exampleAnimation;: exampleAnimation이라는 이름의 애니메이션을 적용합니다.
• animation-duration: 4s;: 애니메이션이 4초 동안 지속됩니다.
• animation-timing-function: ease-in-out;: 애니메이션의 속도 곡선을 ease-in-out로 설정합니다.
• animation-delay: 1s;: 애니메이션이 1초 지연 후 시작됩니다.
• animation-iteration-count: infinite;: 애니메이션이 무한 반복됩니다.
• animation-direction: alternate;: 애니메이션이 한 방향으로 실행된 후 반대 방향으로 실행됩니다.
• animation-fill-mode: forwards;: 애니메이션이 끝난 후 마지막 상태를 유지합니다.