CSS 속성 - transform/transition, animation

민겸·2023년 3월 9일

Transform

HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있다.
해당 요소를 움직이거나, 회전시키거나, 크기를 변경하거나, 기울일 수 있는데, transform 속성값으로 특수한 함수를 넣어주는 것으로 변경할 수 있다.

주의
transform을 사용하려면 해당 요소의 display 속성이 블록, 또는 인라인 블록이어야 한다.

CSS 좌표 체계
transform 속성에서 사용하는 x, y, z좌표는 다음 그림과 같은 좌표 체계를 따른다. http://www.tcpschool.com/lectures/img_css_coordinate.png

translate

translateX(tx)
: 현재 위치에서 해당 요소를 주어진 X축의 거리만큼 이동시킨다.

translateY(ty)
: 현재 위치에서 해당 요소를 주어진 Y축의 거리만큼 이동시킨다.

translate(tx, ty)
: 현재 위치에서 해당 요소를 주어진 X축과 Y축의 거리만큼 이동시킨다.

주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킨다.

scale

scaleX(sx)
: 해당 요소의 크기를 지정한 크기만큼 X축으로 확대, 축소한다.

scaleY(sy)
: 해당 요소의 크기를 주어진 배율만큼 Y축으로 확대, 축소한다.

scale(sx, sy)
: 해당 요소의 크기를 주어진 배율만큼 X축과 Y축으로 확대, 축소한다.

주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄인다.

rotate

rotate(각도'deg')
: 해당 요소를 주어진 각도만큼 회전시킨다. (양수는 시계방향, 음수면 반시계방향)

rotateX(각도'deg')
: 해당 요소를 X축으로 회전시킨다.

rotateY(각도'deg')
: 해당 요소를 Y축으로 회전시킨다.

rotateZ(각도'deg')
: 해당 요소를 Z축으로 회전시킨다.

이때 입체감 있게 표현하려면 perspective(픽셀값)속성을 부모 요소에 적용해야 한다. 픽셀값이 작아질수록 원근감이 더 크게 느껴진다.

skew

skewX(ax)
: 지정한 각도만큼 X축으로 왜곡한다(기울인다).

skewY(ay)
: 지정한 각도만큼 Y축으로 왜곡한다(기울인다).

skew(ax)
: 지정한 각도만큼 X축과 Y축으로 왜곡한다(기울인다).

matrix

모든 2D transform 메소드를 한 줄에 설정할 수 있게 한다.

matrix(
scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()
);

<style>
	matrix(0.7, 0, 0, 0.7, 1, 0);
</style>

Transition

사전적 의미로는 '전환' 이라는 뜻을 가졌으며, CSS에서 transition은 속성 값이 변할 때 더 부드럽게 전환할 수 있도록 도와준다.

transition-property

어떤 속성에 트렌지션 효과를 줄지 정한다.

transition-property: <속성1>, <속성2>, ... ;와 같이 지정할 수 있다.
all : 모든 속성을 지정한다.
none : 아무것도 지정하지 않는다.

transition-duration

트렌지션 효과를 몇초동안 지정할지 정한다.

지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않는다.

transition-delay

지정한 초(시간) 만큼 기다렸다가 실행한다.

transition-timing-function

전환(transition) 효과의 시간당 속도를 설정한다.

liner : 효과가 처음부터 끝까지 일정한 속도로 진행된다.
easy-in : 천천히 시작했다가 빨리 끝난다.
easy-out : 빠르게 시작했다가 천천히 끝난다.
ease-in-out : 천천히 시작했다가 천천히 끝난다.

이외의 추가효과
MDN

transition

단축속성으로 위의 속성들을 한 줄로 설정할 수 있다.

<style>
	.box1{
            /*transition-property: width, height;
            transition-duration: 1s;
            transition-delay: 1s;
            transition-timing-function: ease-in; */       
            transition: width 1s, height 1s;
        }
        .box1:hover{
            width: 200px;
            height: 200px;
        }
</style>

Animation

요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변환시켜 주는것을 말한다.

`@keyframe`

CSS스타일이 변하는 중간지점을 키프레임이라고 한다. 즉 @keyframe은 애니매이션의 중간상태를 지정해주는 역할을 한다.

시작과 끝의 상태를 지정해 주는것으로 사용할 수 있고, 중간의 몇%지점에서 다른 상태로 변할지도 지정할 수 있다.

from(시작/0%) ~ to(끝/100%)

<style>
	@keyframes turn-to-circle{
    	from{
        	border-radius: 0;
            }
        50%{
        	border-radius: 50%;
           }
        to{
        	border-radius: 0;
          }
    }
</style>

animation-name

애니매이션의 중간 상태를 지정하기 위한 이름을 정의한다.
중간 상태는@keyfrmaes를 이용하여 지정한다.

animation-duration

애니메이션 효과를 재생할 시간을 설정한다. 재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않는다.

animation-delay

애니메이션 효과가 나타나기까지의 지연 시간을 설정한다. 애니메이션 효과는 이 속성값으로 설정된 시간이 지난 후에 시작된다.

animation-interation-count

애니매이션이 몇번 반복될지 정한다. infinite로 지정해서 무한반복 시킬 수 있다.