트랜지션(transition)

• 트랜지션은 css 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다.
• 트랜지션을 안쓰고 CSS 프로퍼티를 변경하면 프로퍼티 변경에 따른 표시의 변화는 지체없이 즉시 발생한다.
• 트랜지션은 CSS 상태 변화 시, CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절하는 역할을 한다.

import React from 'react';
import styled from '@emotion/styled';

const Division = styled.div`
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 2s;

  &:hover {
    border-radius: 50%;
    background-color: gray;
  }
`;

function App() {
  return <Division />;
}

export default App;

트랜지션의 프로퍼티

• transition-property

  • 트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다.
  • default : all(모든 프로퍼티가 트랜지션의 대상이 된다)

• transition-duration

  • 트랜지션이 일어나는 지속시간을 초 단위 또는 밀리 초 단위로 지정한다.
  • default :0s
  • transition-duration 프로퍼티 값은 transition-property 프로퍼티 값과 일대일 대응한다.

• transition-timing-function

  • 트랜지션 효과를 위한 수치 함수를 지정한다,
  • default: ease
  • 프로퍼티 값
    • ease(default): 느리게 시작하여 점점 빨라졌다가 느려지면서 종료한다.
    • linear: 시작부터 종료까지 등속 운동한다.
    • ease-in: 느리게 시작한 후 일정 속도에 다다르면 그 상태로 등속 운동한다.
    • ease-out: 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다.
    • ease-in-out: ease와 비슷하게 느리게 시작하여 느려지면서 종료한다.

• transition-delay

  • 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위 또는 밀리 초 단위로 지정한다.
  • default: 0s

• transition

  • 모든 트랜지션 프로퍼티를 한번에 지정한다.

  transition: property duration function delay
  

  • default : all 0 ease 0

Memo

• transition은 자동으로 발동하지 않는다. :hover와 같은 가상 클래스 선택자 또는 javascript의 부수적인 액션에 의해 발동된다.
• 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다.
• layout에 영향을 주는 CSS 프로퍼티 값이 변화하면 변화에 영향을 받는 모든 요소의 기하값(위치와 크기)를 다시 계산하여 layout 작업(reflow)을 수행하므로 성능 저하의 요인이 된다. 여기서 트랜지션까지 주면 성능에 악영향을 줄 수 있으므로 되도록 layout에 영향을 주는 트랜지션 효과는 피하도록 한다.

참고자료