---

Transform

요소의 변환 효과

앞에 함수 선언하고 나열할 때
transform : 변환함수1, 변환함수2, 변환함수2 ..;
여러개 함수명 없이 쓰고 싶을 때 순서 지켜서 작성
transform : 원근법 이동 크기 회전 기울임;

2D 변환함수

이동

translate (x,y)
translate X(x)
translate Y(y)

크기 조절

scale(x,y)
scaleX(x)
scaleY(y)

회전

rotate(degree)

기울임

skew (x,y)
skewX(x)
skewY(y)

Transition

요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

transform : 변환함수1 변환함수2 변환함수2...;
transform : 원근법 이동 크기 회전 기울임;

Animation

keyframes

• CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능
• 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능이다.
• 키프레임을 변수에 선언하고 해당 변수를 CSS에서 불러와서 사용할 수 있다!

Animation 속성

animation-name(이름)
animation-duration(지속시간)
animation-delay
animation-iteration-count(반복 횟수)
animation-timing-function(반복형태)
animation-direciton(애니메이션 방향)

단축속성

animation : name duration timing-function delay iteration-count direction
위으 순서를 지켜서 작성한다.