CSS Transform / Transition / Animation

안녕하세요. 오늘은 CSS Transform / Transition / Animation에 대해 알아볼게요.

 

 

 

Transform(변형)

 

변형은 특정 요소의 크기나 형태 등 스타일이 바뀌는 것이에요.

 

변형의 종류는 총 두 가지 2차원 변형과 3차원 변형이에요.

 

 

2차원 변형

 

2차원 변형은 x축과 y축을 사용해 요소를 변형하여 수평이나 수직으로 웹 요소를 변형해요.

 

크기나 각도만 지정할 수 있어요. 아래는 2차원 변형 종류예요.

 

 

 

 

3차원 변형

 

3차원 변형은 x축, y축 원근감을 추가하고, z 축은 앞뒤로 이동해서 

 

사용자 방향으로 이동할수록 값이 더 커질 수 있어요. 아래는 3차원 변형 종류예요.

 

 

 

 

Transition(트랜지션)

 

트랜지션은 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것이에요.

 

즉 도형 위의 마우스를 올려놓으면 사각형의 테두리와 테두리색이 바뀌고,

 

마우스를 치우면 원래 스타일로 되돌아가는 현상이에요.

 

아래는 트랜지션의 종류예요.

 

 

 

Animation(애니메이션)

 

CSS 애니메이션은 웹 요소에 애니메이션을 추가하는 것으로

 

애니메이션을 시작해 끝내는 동안 원하는 곳 어디든 스타일을 바꾸며 애니메이션 정의가 가능해요.

 

keyframes(키프레임) -> 애니메이션 중간에 스타일이 바뀌는 지점

 

 

 

여기까지 CSS Transform / Transition / Animation 세 가지를 알아봤는데요.

 

세 가지를 잘 활용한다면 HTML 스타일을 재밌게 꾸밀 수 있을 것 같아요.