#21 - CSS 애니메이션 - 전환

전환 설명

트랜지션은 애니메이션을 만들 때 주로 사용되며, 작동은 아래와 같다.

1. CSS의 시작과 끝 값 확인
2. taransition 속성을 통하여 중간 값을 알아냄
3. 시작~중간~끝을 이어 애니메이션을 만듦

전환 단축 입력 방법

/* 속성이름 지속시간 딜레이시간 타이밍함수 */
/* 속성 일부 제어 */
.class1{
    width : 50%; 
    height : 50%; 
    color : red;
    transition : height .5s .5s ease-in,
        color .5s .5s ease-in;
}
.class1::after{
    width : 100%; 
    height : 100%; 
    color : blue;
}
/* 속성 전체 제어 */
.class2{
    width : 50%; 
    height : 50%; 
    transition : .5s;
}
.class2::after{
    width : 100%; 
    height : 100%; 
}

속성 설명

속성	개별 속성	의미	값
transition	-	중간값을 계산하여 애니메이션을 만들 수 있다. 시간 단위 1s=1000ms
	transition-property	속성 이름	애니매이션을 작동시킬 속성
	transition-duration	지속 시간 설정
	transition-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	대기 시간 설정	숫자+시간 단위