[CSS] transition

studying  · 3 mins read

CSS transition은 정해진 시간 동안 요소의 속성값을 부드럽게 변화시켜준다. 제공되는 속성은 다음과 같다.

transition

해당 요소에 추가할 CSS 스타일 전환 효과를 설정!

transition: transition효과 지속시간;


.container {

    width: 100px;

    -webkit-transition: width 1s;

    transition: width 1s;

}

.container:hover { width: 300px; }

container 요소에 마우스 hover시 → 너비가 1초 동안 3배로 늘어난다.

.container {

    height: 100px;

    width: 150px;

    -webkit-transition: width 1s, height 3s;

    transition: width 1s, height 3s;

}

  .container:hover { width: 300px; height: 500px; }

→ 요소의 여러 속성 동시에 변경!

transition-timing-function

transition 효과의 시간당 속도 설정

  1. linear : transition 효과가 처음부터 끝까지 일정한 속도로 진행
  2. ease : 기본값. transition 효과가 천천히 시작 → 그다음에는 빨라짐 → 마지막에는 다시 느려짐
  3. ease-in : transition 효과가 천천히 시작
  4. ease-out : transition 효과가 천천히 끝남
  5. ease-in-out : transition 효과가 천천히 시작, 천천히 끝남
  6. cubic-bezier(n,n,n,n) : transition 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

transition-delay

transition 효과가 나타나기 전까지의 지연 시간을 설정

설정된 시간이 흐른 뒤에야 transion 효과가 시작!

  • transition 효과 + transform(move, rotate, scale, and skew elements) 효과 동시에 적용

  .container {

      height: 100px;

      width: 100px;

      -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

      transition: width 2s, height 2s, transform 2s;

  }

.container:hover {

      width: 300px;

      height: 300px;

      -webkit-transform: rotateY(180deg);

      transform: rotateY(180deg);

  }

transition-property

요소에 추가할 transition 효과 설정

transition-duration

transition 효과가 지속될 시간 설정

* transform: CSS 시각적 서식 모델의 좌표 공간을 변경

scale(): 확대, 축소

transform: scale(x축 크기, y축 크기)

transform: scaleX(x축 크기)
transform: scaleY(y축 크기)

rotate(): 회전

transform: rotate(x축 Ndeg, x축 Ndeg)

transform: rotateX(x축 Ndeg)
transform: rotateY(y축 Ndeg)

translate(): 이동

transform: translate(x축 위치, x축 위치)

transform: translateX(x축 위치)

transform: translateY(y축 위치)

skew(): 기울기

transform: skew(x축 Ndeg, x축 Ndeg)

transform: skewX(x축 Ndeg)

transform: skewY(y축 Ndeg)

transform-origin: 기준점 변경

transform-origin: x축 y축

%나 길이로 입력 가능하다. x축에는 left, center, right
y축에는 top, center, bottom으로 입력해도 된다. (default: 중심을 기준으로 동작 50% 50%)

transform 예시

1

li {
	transition: 300ms linear;
}

li:hover {
    transform: scale(0.5);
		/* transform-origin: 50% 50%; */
}

2

li {
	transition: 300ms linear;
}

li:hover {
    transform: scale(0.5);
		transform-origin: left top;
}

3

references