    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>천천히 변하기</title>
      <style>
        .tr1 { transition: 1s; }
        .tr1:hover { text-shadow: 7px 7px 8px #57c; }
        .tr2:hover {
          transition: 1s;
          text-shadow: 7px 7px 8px #57c;
        }
      </style>
    </head>
    <body>
      <h1 class="tr1">마우스를 올려보세요</h1><br>
      <h1 class="tr2">transition 위치 변경</h1>
    </body>
    </html>