[CSS] transition (transform으로 확인하는)

목차

1. transition

2. transform

 

1. transition

 

transition 은 animation과 같이 효과를 줄 때 사용하지만 animation 처럼 구체적으로 애니메이션을

지정하지 못하지만 간단하게 애니메이션 효과를 줄 수 있는 장점이 있습니다. transition에 대해 알아보겠습니다.

 

transition: (property/속성) (duration/지속 시간) (timing-functing/타이밍 기능) (delay/지연)

 

위에는 transition: 방식입니다. 모든 속성에 변화를 주고 싶으면 transition : all 로 쓰기도 합니다.

transition-property : 속성 / transition-duration : 지속 시간

transition-timing-function : 타이밍 기능 / transition-delay : 지연시간

을 의미합니다. 코드를 통해 어떻게 작용하는지 확인해보겠습니다.

 

 

위에 코드는 hover 할 때 transition : all 1s linear => 모든 속성에 1초동안 선형방식으로 변화를 주는 애니메이션입니다.

hover 할 때 변화 하는 값은 background와 transform 이 있는 것을 확인할 수 있습니다. 오른쪽에 구현화면을 보면 두 속성이 1초동안 변화하는 것을 볼 수 있습니다.

 

 

2. transform

잠깐 위에 코드에서 변화한 속성인 transform에 대해서 잠깐 알아보도록 하겠습니다

transform은 요소에 이동, 각도 및 크기 등을 조절할 수 있는 css 속성입니다.

 

transform :
translateX / translateY (600px) : X 축으로 600px / Y축으로 600px 이동합니다.
rotate(45deg) : 요소에 각도를 45도 만큼 변화시킵니다.
scale(1.4) : 요소에 원래 크기에서 1.4배만큼 증가합니다.

transform은 이런 형태의 띄어쓰기로 여러가지 속성에 값을 줄 수 있는 점 하시면 좋겠습니다.
transform : translateX(600px) rotate(45deg) scale(1.4);