transition

단축속성으로 사용 가능

transition-property

전환 효과를 사용할 속성 이름

전환 효과가 있는 가상 선택자가 있는 경우 해당 css가 적용되는
속성을 적용시켜줄 수 있음.

transition-duration

전환 효과의 지속시간 설정

transition-timing-function

타이밍 함수 지정

linear

선형으로 속도 차이 없이 동작

steps

뚝뚝뚝뚝 끊겨서 동작

transition-delay

전환 효과의 대기 시간 설정

transform

요소의 변환 효과를 지정

.box{
	transform: rotate(20deg) translate(10px, 0);
}

2D 변환 함수

translate(x축, y축)

이동하는 함수

scale(x, y)

크기를 조정하는 함수

rotate

회전시키는 함수

단위 : deg

skew

요소의 기울임을 나타냄
단위 : deg

주의사항

position을 transition을 하는데 사용할 경우 안좋을 수 있다. 때문에 transform 을 사용하는 것이 좋다.

애니메이션

animation

요소에 애니메이션을 설정 / 제어

animation : 애니메이션이름 지속시간 - 기타등등

@keyframes

애니메이션을 지정하는 부분

2개 이상의 애니메이션의 중간상태를 지정

@keyframes f-animation{
	0%{
		width:100px;
	}
    
    	100%{
    		width : 500px;
    	}
}

와 같이 사용 가능하다.

animation-duration

애니메이션 지속시간

animation-timing-function

타이밍 함수(애니메이션 효과 계산 방법) 지정

linear

ease-in, out

animation-delay

animation-direction

뱡향 지정

alternate : 정뱡향 역방향 반복

animation-iteration-count

반복 횟수

animation-fill-mode

애니메이션 전 후 상태를 설정

animation-play-state

애니메이션의 재생과 정지를 설정