animation

애니메이션 개요

• transition과 비슷한 개념의 A-B의 과정을 보여주지만, 유저의 action 없이 스스로 변경될 수 있도록 설정
• 단순히 A-B가 아닌 다수의 스타일을 세트로 변환시킬 수 있음

@keyframes

• 변화시킬 여러가지의 스타일들을 세트로 묶어 정의하게 해준다.

div {
	amimation : name 5s infinite alternate;
}
@keyframes name {
	from{ color : red; }
	to {  color : blue; }
}
or
@keyframes name {
	0% { width : 300px; }
	50% {  width : 200px; }
    100% { width : 100px; }
}

animation-name

• @keyframes의 이름을 값으로 입력
• 대소문자 구별, az09_- 만 가능

animation-duration

• 애니메이션의 한 사이클이 완료하는데 걸리는 시간을 지정
• 음수의 값은 무시된다.

animation-delay

• 시작할 시점을 지정할 수 있다.
• 음수의 값을 지정하면 시작 지점이 그만큼 앞당겨짐

animation-timing-function

• 트렌지션의 timing-function과 동일하게 동작

animation-iteration-count

• 애니메이션의 반복 횟수를 지정하는 속성
• value -> infinite 무한 or 숫자로 횟수 지정

animation-direction

• 애니메이션의 재생 방향을 지정하는 속성
• normal 정방향, reverse 역방향, alternate 정-역-정, alternate-reverse 역-정-역

animation-play-state

• 기본값 running 재생 / paused 일시정지

animation-fill-mode

• 기본값 none, 애니메이션이 실행되지 않을 때 대상에 키프레임 스타일을 적용하지 않는다.
• forwards 키프레임의 마지막 프레임 스타일을 그대로 유지
• backwards 키프레임의 시작 프레임 스타일을 시작 시점으로 지정
• boths 기존 스타일을 무시하고 시작 끝을 0% 100%의 스타일로 지정

animation ( 단축 속성 )

• 애니메이션의 속성을을 단축 속성으로 한번에 정의, 앞쪽에 정의된 시간 값을 duration 뒤는 delay로 정의 됨