애니메이션

transform

💡transform
요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성

transform은 transition이나 animation과 함께 사용하여 더 다채로운 애니메이션 효과를 만들 수 있다.

❗️ 변형 가능한 요소만 transform할 수 있음
즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다.

💡 transform 속성 값

• scale
• skew(x-angle, y-angle)
• translate(x, y)
• rotate(angle)

❗️ 변환함수를 프로퍼티값으로 쉼표없이 나열하는데, 나열순서에 따라 차례대로 효과가 적용된다.

transform: func1 func2 func3 ...

💡 순서가 중요한 속성 vs 순서 중요하지 않은 속성

• 순서 중요 - rotate translate
• 순서 안중요 - scale skew

transform: rotate(30deg) translateX(10px) --> 30도 회전 -> **회전된 축**에서의 x축으로 이동 
transform: translateX(10px) rotate(30deg) --> 기본 x축에서 이동 -> 회전 30도

1. scale

X축으로 x만큼 Y축으로 y만큼 요소를 축소 or 확대한다. (0과 양수)
➡️ n배만큼 축소 or 확대

• scale(x,y) - 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.
• scaleX(n) - 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.
• scaleY(n) - 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.

transform: scale(0.5)
시각적인 요소에만 영향을 준다.

circle img {
	transform: scale(0.5);
    transition: transform .4s; // ⭕️ 이걸 여기에 넣으면 마우스를 올렸을 때랑 치웠을 때 둘 다 적용
}

.circle:hover img { // 가상 클래스 (수도 클래스)
	transition: transform .4s; // ❌이걸 여기에 넣으면 마우스를 올렸을 때만 적용되고 마우스를 치우면 적용안됨
	transform: scale(1);
}

2. skew

X축으로 x도만큼 Y축으로 y도만큼 요소를 기울인다. (+/- 각도(deg))
➡️ 해당 각도만큼 기울임

• skew(x-angle,y-angle) - 요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.
• skewX(x-angle) - 요소를 X축으로 x 각도만큼 기울인다.
• skewY(y-angle) - 요소를 Y축으로 y 각도만큼 기울인다.

circle img {
	transform: scale(0.5) skewX(-10deg) // transform은 여러개의 항목들이 세트로 해석!
}

.circle:hover img { // deg --> degree (각도)
	transform: scale(0.5) skewX(-10deg) // hover되었을 때 transform 내용이 통째로 변경되므로 중복되는 속성까지 한번에 적어줘야한다.
}

❗️ transform은 여러개의 항목들이 세트로 해석!
hover 되었을 때 transform 내용이 통째로 변경되므로 중복되는 속성이라도 다시 적어줘야한다.

3. translate(x, y)

X축으로 x만큼 Y축으로 y만큼 이동시킨다. (px, %, em 등)

• translate(x,y) - 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.
• translateX(n) - 요소의 위치를 X축으로 x만큼 이동시킨다.
• translateY(n) - 요소의 위치를 Y축으로 y만큼 이동시킨다.

4. rotate(angle)

요소를 n만큼 회전시킨다. (+/- 각도(deg))
➡️ 해당 각도만큼 회전 (양수: 시계방향, 음수: 반시계 방향)

• rotate(angle)

transition

CSS 속성의 값이 일정 시간 동안 자연스럽게 변화하도록 애니메이션 효과를 적용한다.
➡️ 한 상태에서 다른 상태로의 변화가 즉시 이루어지지 않고, 부드러운 전환 효과를 줌

💡 transition 종류

• property: 애니메이션 효과를 적용할 CSS 속성
• duration: 전환이 완료되는 시간
• timing-function: 애니메이션의 시간 흐름을 제어하는 함수
• delay: 애니메이션이 시작되기 전의 대기 시간

❗️ 보통 상태(:hover)가 변하기 전에 미리 입력
상태가 변화할 때 넣으면 상태가 변화할 때 (마우스 오버)랑 변화가 끝날 때(마우스 아웃)에 둘 다 적어줘야 하므로 상태 변화 전에 사용하여 두 상황 다 적용되도록 한다.

애니메이션

💡 애니메이션 종류

• animation-name
• animation-duration
• animation-iteration-count
• animation-direction

애니메이션 지정 (이름 : 내가 원하는 이름으로)

@keyframes fire { // 어떻게 애니메이션 될지 정해서 키프레임으로 지정 --> fire은 내가 지은 애니메이션 이름
	0% {
    	transform: scale(0.5) skewX(-10deg);
    }
	100% {
    	transform: scale(0.5) skewX(10deg);
    }
}

애니메이션 사용

.circle img {
	animation-name: fire; // 어떤 애니메이션? 
    animation-duration: 1s; // 얼마나 동안 애니메이션? ➡️ 이 시간동안 애니메이션 한번!! 실행
    // 1초 동안 0%~100%까지 1번 진행
    animation-iteration-count: infinite // 위를 반복하는 횟수 
    animation-direction: reverse; // ( 100% --> 0%) // 원래는 0% --> 100%
    animation-direction: alternate; // 0% --> 100% 방향으로만 진행되어 움짤같이 좀 끊기는 것 같아서 방향을 
    
}

❗️ animation-duration - 한번의 동작이 이 시간 동안 일어나는 것
시간이 길면 동작이 거의 실행되지 않는 것 처럼 엄청 느리게 실행된다.