#23 - CSS 애니메이션 - keyframe

애니메이션 설명

요소의 애니메이션을 설정

속성 예시

/* 애니메이션이름 지속시간 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생정지 */
/* 애니메이션이름 지속시간 설정 필수, 이후는 옵션 */
.class1{
    width : 50%; 
    height : 50%; 
    color : red;
    animation : aniSet .5s ease-in;
}
/* keyframe 애니메이션이름 */
@keyframe aniSet{
    0% { width : 50%;}
    100% { width : 100%;}
}

속성 설명

속성	개별 속성	의미	값
animation	-	요소의 애니메이션을 지정하는 keyframe과 연결하고, 이를 제어
	animation	애니메이션 이름	텍스트
	animation-name	지속시간 시간 단위 1s=1000ms	숫자+시간 단위
	animation-timing-function	애니메이션 속도 감소/증가 설정 ease : 빠름~느림 linear : 일정 ease-in : 빠름~느림 ease-out : 느림~빠름 ease-in-out : 느림~빠름~느림 step(n) : n번 분할	ease, linear, ease-in, ease-out, ease-in-out,step(n)더 많은 값 보기
	transition-delay	대기 시간 설정	숫자+시간 단위
	animation-iteration-count	애니메이션의 반복 횟수 설정. altenate 적용 시, 역방향도 1회로 카운트함	숫자, infinite
	animation-direction	반복 방향 설정 normal : 정방향 반복 reverse : 역방향 반복 alternate : 정방향에서 역방향 반복하여 왕복 altenate-reverse : 역방향에서 정방향 반복하여 왕복	normal, reverse, alternate, altenate-reverse
	animation-fill-mode	애니메이션 전후상태 정의 none : 요소 위치 -> 키프레임 시작 위치 ~ 키프레임 끝 위치 -> 요소 위치 forward : 요소 위치 -> 키프레임 시작 위치 ~ 키프레임 끝 위치 backward : 키프레임 시작 위치 ~ 키프레임 끝 위치 -> 요소 위치 both : 키프레임 시작 위치 ~ 키프레임 끝 위치	none, forward, backward, both
	animation-play-state	애니매에션 재생 정지 설정	running, paused
@keyframe		요소의 애니메이션을 지정. 2개 이상의 애니메이션 프레임을 지정 속성 예시 @keyframe 애니메이션이름{        숫자% { 속성 : 값; }         숫자% { 속성 : 값; }         숫자% { 속성 : 값; } }