transition, animation, transform

poiemaweb의 transition

CSS의 transition, animation, transform은 웹 개발에서 요소의 애니메이션 및 전환 효과를 제어하는 데 사용된다. 이런 요소의 변환이나, 이벤트들을 js로 처리할지, css로 처리할지 고민이 많았는데, 이번에 공부하면서 "CSS로 처리 할 수 있다면 CSS로 처리하자"고 기준을 세웠다. 이유를 정리해보자면 다음과 같다.

1. 더 나은 성능과 더 좋은 경험 : CSS 애니메이션 및 전환은 브라우저의 GPU 가속을 활용하여 애니메이션을 부드럽게 처리하므로 성능이 향상된다고 한다. 이를 통해 사용자 경험이 더 좋아지는데, JavaScript로 애니메이션을 만들 때 성능 문제가 발생할 수 있으며, 부드럽지 않은 애니메이션을 만들 가능성이 높다.

2. 간단한 애니메이션 및 전환: 요소의 기본적인 애니메이션 및 전환 효과를 만들 때 CSS가 훨씬 간단하고 직관적이다. 예를 들어, 크기 조절, 회전, 투명도 변경 등의 간단한 효과는 CSS로 더 쉽게 구현할 수 있다. 일단 익숙해지기만 하면 바로 바로 가져다 쓸 수 있어서 좋을 것 같다.

3. 유지보수와 코드 가독성: CSS로 애니메이션을 정의하면 스타일과 동작이 분리되어 코드의 가독성과 유지보수성이 향상된다. 물론 사용하는 CSS 프레임워크에 따라 그렇지 않을 수도 있겠지만, 적어도 JavaScript를 사용하여 동적 효과를 만들 경우 두 가지 로직을 하나의 코드 블록에서 처리해야 하는 것 보다는 덜 복잡하다.

이정도로 정리할 수 있다. 하지만 역시 절대라는 건 없다. CSS로 처리할 수 없는 애니메이션도 있을 것이고, CSS로 처리하는 것이 더 복잡할 수도 있다. 그때 그때 적절하게 작업해보자.

transition

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

transition 속성은 요소의 속성이 변경될 때 해당 변경 사항을 부드럽게 애니메이트하도록 지원한다. 예를들면, hover 상태에 들어갔을 때 색상, 크기, 위치 등의 속성을 부드럽게 전환하는 데 사용된다.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* transition 효과를 적용하고 싶은 요소에 transition 속성을 적어준다 */
  transition: width 1s, height 1s, background-color 1s;
}

.box:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

이렇게 css에서 직접적으로 변화를 줄때 적용 할 수도 있고,

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s;
}

function changeColor() {
  const box = document.getElementById("myBox");
  const randomColor = getRandomColor();
  box.style.backgroundColor = randomColor;
}

이렇게 js에서 요소의 속성을 변경시킬 때도 마찬가지로 적용이 가능하다. 여기서 알 수 있는것은,

transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 위 예제의 div 요소에 적용된 트랜지션은 이와 같은 부수적 액션없이는 어떤 효과도 볼 수 없다.

transition은 그 자체로는 어떤 효과도 주지 않지만, 부수적인 액션이 발동되면 그 효과를 나타낸다.

transition의 프로퍼티

프로퍼티	설명	기본값
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition-timing-function	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)

자세한 내용은 위의 링크 참고

animation

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다. :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다.

즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

animation 속성은 요소에 더 복잡한 애니메이션을 제공한다. 다양한 keyframes를 정의하여 요소의 스타일을 제어하고 반복 및 재생 속도를 설정할 수 있다. @keyframes 규칙을 사용하여 키프레임을 정의하고 animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction 등의 속성을 사용하여 설정한다.

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: move 2s linear infinite;
}

이건 일단 이정도가 있다는 걸 알아두고 넘어가자

transform

Transition은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다.

Animation은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.

Transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.

transform 속성은 요소의 변형(이동, 회전, 크기 조절 등)을 지정한다. 주로 2D나 3D 변형을 다루는 데 사용된다.

1. 2D 트랜스폼 (2D Transform)

transform function	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
skew(x-angle,y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다.	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(1) rotate(0deg);
  transition: transform 1s;
}

.box:hover {
  transform: scale(1.5) rotate(45deg);
}

위의 코드에서 .box 요소에 호버할 때 크기가 확대되고 45도 회전되도록 변형한다. transition 속성을 같이 사용하여 변형을 부드럽게 만들 수 도 있다.

정리

간단하게 css의 transition, animation, transform에 대해 알아보았다. 이제는 이것들을 활용해보면서, 더 자세히 학습해보자.