animation

animation : 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

 

.box {

    width:100px;

    height:100px;

    background:tomato;

    animation: hello 2s linear infinite both;

 

@keyframes hello {

    0% {

        width:200px;

    }

    100% {

        width:50px;

    }

}

 

* transition은 전후의 상태만 지정이 가능하며 animation은 % 지정으로 다양한 애니메이션을 지정할 수 있음.

* 항상 delay는 duration 값 뒷 부분에 입력해야 함.

 

 

 

속성

name

 

duration

 

timing function

    ease (transition에서 사용했던 것과 동일)

    linear

    ease-in

    ease-out

    ease-in-out

    cubic-bezier(n,n,n,n)

    steps(n)

 

interation-count

    infinite 무한반복

    숫자 입력

 

direction

    normal 정방향 (기본 설정 값)

    reverse 역방향

    alternate 정방향에서 역방향으로 반복(왕복)

    alternate-reverse 역방향에서 정뱡향으로 반복(왕복)

 

fill-mode : 애니메이션의 전후상태를 설정

    none : 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 ->동작 -> 기존위치에서 끝 (기본 설정값)

    forward : 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝

    backward : 애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝

    both : 애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

 

play-state : 애니메이션의 재생과 정지를 설정

    running 재생

    paused 정지 (애니메이션 중 멈추는 것이지 재생 전으로 돌아가는 것이 아님)