element가 다른 상태로 전환될 때, 그 외형을 바꿀 수 있다.
ex) link위에 hover하면 color를 변경

The Properties

  • transition-property
    • 변경하려고 하는게 어떤거?
  • transition-duration
    • 얼마나 길게 전환이 되는가?
  • transition-timing
    • 순차적으로 부드럽게 전환이 되는가?
  • transition-delay
    • 전환 시작 전에 얼마나 기다려야 하는가?

transition 사용하기 위한 순서

  1. element 정의
  2. transition을 위한 element 선택
  3. 새로운 값 정의
    pseudo-class하고 같이 해야됨
div {
    color: #000000;
    background: #2db34a;
    width: 250px;
    transition-property: color, width;
    transition-duration: .5s;
    transition-timing-function: linear;
    transition-delay: .5s;
}
div:hover {
    color: #ffffff;
    width: 350px;
    background: #2D31B3;
    border-radius: 50%;
}

Using shorthands

여러개 transition property 를 가졌다면, shorthand를 사용하는게 낫다.

transition: background .2s linear, border-radius 1s ease-in 1s;

Review

  • transition은 재미 있는 측면을 만드는 데 사용할 수 있다.
  • element 상태를 더 잘 이해할 수 있게 도와준다. (active, focus … )
  • 접근성은 항상 고려해야 한다.

공부 위치 – https://www.coursera.org/learn/introcss/lecture/JmJhE/03-02-transitions