CSS 로 animation 만들기 : @keyframes 과 animation 속성

 

CSS 에서 @keyframes 속성을 정의하면 위와 같이 애니메이션을 만들어낼수있다.

이 애니메이션은 css 속성들의 특정한 시간안에 전환 + 반복이다.

 

@keyframes 속성을 활용하는것은 mouse 와 JS 를 통해 연동하기전에,

무언가를 프로토타이핑하기에도 유용하다.

 

@keyframes 를 정의하는 방법은 2가지가 있다.

먼저 시작과 끝을 정하는 방법이다.

@keyframes 내가정하는애니메이션명 {

    from {

        /* 시작점의 여러 속성 값들 */

    }

    to {

        /* 끝점의 여러 속성 값들 */

    }

}

만약 여러 단계의 애니메이션을 가지고싶다면 아래와 같이 정의한다.

@keyframes 내가정하는애니메이션명 {

    0%   { /* 시간의 0%   에서 일어날 일 */ }
    50%  { /* 시간의 50%  에서 일어날 일 */ }
    100% { /* 시간의 100% 에서 일어날 일 */ }

}

또는, from to 와 % 를 섞어쓸수도있다.

@keyframes 내가정하는애니메이션명 {

    from { /* 시간의 0%   에서 일어날 일 */ }
    50%  { /* 시간의 50%  에서 일어날 일 */ }
    to   { /* 시간의 100% 에서 일어날 일 */ }
    
}

 

위에 적힌 "내가정하는애니메이션명" 은 일종에 변수명이다.

위와 같이 애니메이션을 정의했다면, 해당 애니메이션명을 가지고

아래와 같이 다른 css 클래스에 대입하게된다.

#parent {

    animation-name              : 내가정하는애니메이션명;
    animation-duration          : 4s;           /* 애니메이션 발생 시간 */
    animation-delay             : 1s;           /* 페이지 로딩후 애니메이션 시작전 딜레이 시간 */
    animation-iteration-count   : infinite;     /* 애니메이션을 얼마나 반복할지 */
    animation-timing-function   : ease;         /* 애니메이션 시간 그래프 */
    animation-direction         : normal;       /* 애니메이션 진행 방향 (alternative 일 경우 back & forth) */

}

위의 6가지 animation- 속성을 animation 속성 하나에 다 적을수도있다.

#parent {
	
    animation: myAnimationName 4s 1s infinite ease normal;

}

결과적으로 아래와 같이 사용할것이다.

<template>
    
    <div id="parent"></div>

</template>

<style scoped>

#parent {

    width                       : 500px;
    height                      : 500px;
    border                      : 5px solid white;
    margin                      : 40px;

    animation: 내가정하는애니메이션명 1s 1s infinite ease normal;

}

@keyframes 내가정하는애니메이션명 {

    from {

        border-radius: 0%;
        background-color: red;

    }

    to {

        border-radius: 50%;
        background-color: blue;

    }

}

</style>