Transition 및 TransForm

css를 활용하다 보면 transition 및 transform을 이용하여 다양한 애니메이션을 다루게 된다.
그런데 transition 과 transform을 자주 혼동하데 되는데

• transform : 현재 모습의 최종적인 모습
• transition : 특정형태로 부터 transform 까지 갈때는 효과 정도로 이해하시면 헷갈리지않을 것 같다.

트랜스폼(Tansform)

transform: translate(10px, 50px);
transform: scale(.75);
transform: skew(5deg, -20deg);
transform: rotate(70deg);
transform: scale(.5) rotate(20deg);

트랜지션(Transition)

transition-duration

transition-duration: 1s

transition-timing-function

transition-timing-function: ease

transition-delay

transition-delay

See the Pen Transition by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.

트랜지션 완료 감지하기

el.addEventListener("transitionend", updateTransition, true);

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.left = ev.clientX - 25 + "px";
    f.style.top = ev.clientY - 25 + "px";
  },
  false,
);

Image blur 예제

See the Pen Transition-image blur effect by YoungHyeong Ryu (@YoungHyeong-Ryu) on CodePen.