GitHub 참고

Animation

1. keyframes(키 프레임)

키 프레임 : 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법

키 프레임에는 시작과 종료에 해당하는 최소 2개의 시점에 대한 스타일이 정의 되어야한다.

@keyframes bgchange{
	0%{background-color : red;}
    25%{background-color : yellow;}
    50%{background-color : green;}
    100%{background-color : blue;}
}

@keyframes bgchange{
	from{background-color : red;}
    to{background-color : blue;}
}

1. animation-name 속성

특정 요소에서 적용할 키 프레임명을 지정합니다.
ex) animation-name : bgchange
라고 한다면

@keyframes bgchange{

}

이렇게 사용된다.

2. animation-duration 속성

애니메이션의 지속시간을 설정하는 속성입니다.

3. animation-delay 속성

애니메이션 실행을 지연하는 속성입니다.

4. animation-fill-mode 속성

animation-fill-mode는 애니메이션이 끝난 후 애니메이션의 마지막 상태를 유지할지 아니면 원래 상태로 돌아갈지를 제어하는 속성입니다.

속성값

none (기본값) : 애니메이션이 끝나면 애니메이션의 마지막 상태가 유지되지 않고, 애니메이션을 시작하기 전의 상태로 돌아갑니다.

forwards : 애니메이션이 끝난 후, 애니메이션의 마지막 상태를 유지합니다. 예를 들어, 애니메이션을 끝낸 후에 그 상태 그대로 남아 있게 됩니다.

backwards : 애니메이션이 시작되기 전, 애니메이션의 첫 번째 상태를 유지합니다. 애니메이션이 시작되기 전에 지정한 초기 상태를 계속 유지합니다.

both : 애니메이션이 끝난 후 마지막 상태를 유지하고, 시작되기 전에는 첫 번째 상태를 유지합니다. 즉, 애니메이션 시작과 끝 모두에 대해 지정된 상태를 유지합니다.

none, forwards가 실용적으로 사용된다.

5. animation-iteration-count 속성

애니메이션의 실행 횟수를 조절할 수 있습니다.

6. animation-play-state 속성

애니메이션의 재생 상태를 지정합니다.

속성값 :ㅣ paused, running

7. animation-direction 속성

애니메이션의 진행 방향을 지정합니다.

속성값

normal : 정의된 시간 순서대로 진행합니다 (from -> to)

reverse : 정의된 시간의 역순으로 진행합니다. (to -> from)

alternate : 애니메이션이 1회 이상 실행될 경우 홀수 번째는 normal 짝수 번째는 reverse로 진행합니다.

alternate-reverse : 애니메이션이 1회 이상 실행될 경우 홀수 번째는 reverse 짝수 번째는 normal로 진행합니다.

8. animation-timing-function 속성

애니메이션의 속도를 지정할 때 사용합니다.
transition-timing-function 이랑 동일하게 사용됩니다.

속성값 : linear, ease, ease-in, ease-in-out, ease-out

div{
	width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: bgchange;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
    animation-play-state: running;
    animation-direction: normal;
 }
        
 @keyframes bgchange{
 	0%{background-color: red}
    100%{background-color: blue}

	from{left: 0}
    to{left: 300px}
 }