animation 지정

animation-name

우리가 직접 지어주는 애니메이션의 이름. 원하는 곳에서 애니메이션을 사용할 때, 이 이름을 사용해요.

@keyframes 원하는이름

animation-duration

애니메이션을 지속(재생)하는 시간.
초(s) 또는 밀리초(ms) 단위를 사용해요.

animation-delay

애니메이션이 시작되기 전 대기 시간.
초(s) 또는 밀리초(ms) 단위를 사용해요.

animation-iteration-count

애니메이션의 반복 횟수를 숫자로 지정.
무한 반복을 원하면 infinite라고 써주면 돼요.

animation-direction

• 애니메이션의 재생 방향.
• normal 정방향 재생. 타임라인 0%(from)에서 100%(to) 방향으로.
• reverse 역방향 재생. 타임라인 100%(to)에서 0%(from) 방향으로.
• alternate 정방향, 역방향, 정방향, 역방향… 으로 번갈아 가면서 재생.
• alternate-reverse 역방향, 정방향, 역방향, 정방향… 으로 번갈아 가면서 재생.

@keyframes 클래스이름 {

from

     의 시작 오프셋입니다.0%

to

의 끝 오프셋입니다.100%

}

 

 

예시)

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: salmon;

            animation-name: boxAni;
            
            animation-duration: 1.5s;
            
            animation-iteration-count:3 ;

            animation-direction: alternate;

            animation-delay: 2s;
        }

        @keyframes boxAni {
            from{margin-left: 0px;}
            to{margin-left: 200px;}
        }
    </style>