Index

1. Transition

1.1 Transition이란?

이번 장에서는 transition에 대해서 알아보도록 하겠습니다. transition이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말합니다. 여러 속성들은 차근차근 살펴보도록 하고 가벼운 예제를 통해 transition이 무엇인지 경험해 보도록 하죠.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    div:hover{
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

가로, 세로 100px에 빨강 배경색을 가진 div가 하나 있습니다. div에 마우스를 옮기게 되면 가로, 세로 300px에 파랑 배경색을 가진 div로 변하게 되는 걸 확인할 수 있습니다.

여기서 style에 코드 한 줄만 추가해볼까요? 지금은 이 코드가 무엇을 의미하는지 모르셔도 됩니다.

transition: all 2s;

그 결과,

즉시 변경되면 속성값들이 시간을 두고 천천히 바뀌는 걸 확인할 수 있습니다. 애니메이션처럼 말이죠. 이것이 바로 transition의 마법입니다. transition에 대해 함께 더 알아보도록 합시다.

Web Animation 1부 css Animation

1.2 Transition의 속성들

1.2.1 transition-delay

delay란? delay가 무슨 뜻인가요? 맞습니다. 한국어로 번역하면 '지연'이라는 뜻입니다. 말 그대로 transition 이 일어날 때 얼마만큼 기다렸다가 실행할지 결정해주는 속성입니다.
delay의 값 delay는 transition이 일어나기 전까지 얼마나 기다릴지 지정해 주는 것입니다. 그렇기 때문에 속성값으로는 시간이 들어가게 됩니다. 초 단위를 나타내는 s나 밀리 초를 나타내는 ms로 나타냅니다. 지정해 주지 않을 시에는 0s을 의미하며 지연 없이 바로 transition이 일어납니다.
- delay의 값으로 음수 값도 지정해줄 수 있나요?
delay 예시 마우스를 올렸을 때 배경을 바꿔주는 예제입니다. 세 개의 div에 대해서 delay 값을 다르게 지정해주었습니다. 차이를 직접 확인해 보도록 합시다.

<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    body{
        display: flex;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      font: bold;
      color: white;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .first{
        transition-delay: 0s;
    }
    .second{
        transition-delay: 1s;
    }
    .third{
        transition-delay: 2s;
    }
    div:hover{
        background: blue;
    }
  </style>
</head>
<body>
  <div class="first">0초</div>
  <div class="second">1초</div>
  <div class="third">2초</div>
  
</body>
</html>