CSS - Animation

Animation은 transition과 비슷하지만 hover 기능을 사용않고 요소를 변화시킨다.

 

Animation은 이름을 필수로 정의해줘야한다.

 

또한 @keyframes도 필수로 작성해야한다.

@keyframes은 from과 to를 사용해 변화시킬 요소 속성의 처음과 끝을 지정한다.

(예를 들어, 색상이 red(처음)에서 green(끝)으로. 혹은 넓이가 100(처음)에서 200(끝)으로)

 

다음과 같이 작성하면 된다.

<style>
    .animation {
        animation-name: changeWidth; /* 애니메이션 이름 */
        animation-duration: 2s; 	/* 2초동안 지속 */
        animation-timing-function: linear; /* 일정하게 */
        animation-delay: 1.5s;	/* 1.5초 지연 후 실행 */
        animation-iteration-count: 5;	/* 5번 반복 */
        animation-direction: alternate; /* 애니메이션 진행 방향*/
    }

    @keyframes changeWidth { /* keyframes 옆에는 animation의 이름 작성 */
        from { width: 100px; } 
        to { width: 400px; }
    } /* 클래스가 animation인 요소의 width를 100px에서부터 400px로 변화시킨다. */
</style>

animation-direction 속성에는 alternate, normal, reverse가 있다.

• alternate: from -> to  -> from
• normal: from -> to, from ->to
• reverse: to -> from, to -> from

 

 

Animation 와 Transform 의 결합

 

.css1 {
    animation: rotation1 2s linear infinite alternate;
     /* 순서대로 name  duration  timing-function  iteration-count direction */
}

@keyframes rotation1 {
    from { transform: rotate(-30deg); }  /* transform 중 하나인 rotate를 사용 */
    to { transform: rotate(10deg); }	/* -30도에서 10도로 요소 변화주기 */
}

iteration-count: infinite는 무한 반복이다.