animation_CSS

animation

• 트랜지션보다 할 수 있는 것이 많음
• 트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어할 수 있음
• 하나 또는 복수의 @keyframes으로 이루어짐
  -from(0%){}과 to(100%){}로 애니메이션이 시작하는 시점의 상태와 끝나는 시점의 상태를 정의할 수 있다.

사용법

@keyframes myAnimation {
    from {
        background-color: red;
        width: 100px;
        height: 100px;
    }
    to {
        background-color: blue;
        width: 200px;
        heigh: 100px;
    }
}
//또는 
@keyframes myAnimation {
    0% {
        background-color: red;
        width: 100px;
        height: 100px;
    }
    30% {
        background-color: yellow;
    }
    100% {
        background-color: blue;
        width: 200px;
        heigh: 200px;
    }
}

.sqare {
    animation-name: myAnimation; // @keyframes 이름
    animation-duration: 3s // 변화가 일어나는 기간. 초단위. (기본값 0s)
    animation-iteration-count: 3; (기본값 1. number or infinite.)
    animation-timing-function: ease; // 애니메이션 함수 지정 (기본값 ease)

    /*
        애니메이션이 반복될 때 진행 방향을 지정

        normal: from -> to (기본값)
        reverse: to -> from
        alternate: 홀(normal) 짝(reverse)
        alternate-reverse: 홀(reverse) 짝(normal)
    */
    animation-direction: normal;

    /*
        애니메이션이 실행 상태가 아닐 때 (대기 or 종료) 요소의 스타일 지정

        none:       대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
                    종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

        forwards:   대기 -> 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
                    종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

        backwrads:  대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
                    종료 -> 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.

        both :      대기 -> 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
                    종료 -> 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
    */
    animation-fill-mode: none;

    // running(기본값) || paused
    animation-play-state: running;
    animation-delay: 1s; // 요소 로딩 후 몇 초 후에 애니메이션이 시작될 것인지 지정 (기본값 0s)
    animation : (shorthand)
}