🍎 듀어가기에 μ•žμ„œ

이 글은 λͺ¨λ˜ 웹을 μœ„ν•œ HTML5+CSS3 바이블을 κ³΅λΆ€ν•˜λ©° κΈ°μ–΅ν•΄λ‘˜ λ‚΄μš©λ“€μ„ κ°„λ‹¨ν•˜κ²Œ κΈ°λ‘ν•œ κΈ€μž…λ‹ˆλ‹€.
책에 λŒ€ν•œ μžμ„Έν•œ 사항은 링크λ₯Ό μ°Έκ³ ν•΄μ£Όμ„Έμš”. πŸ‘

πŸ“– 1. CSS3 λ³€ν˜•κ³Ό μ• λ‹ˆλ©”μ΄μ…˜

μ½”λ“œλ₯Ό μ­‰ λ‚˜μ—΄ν•˜κ³  μ£Όμ„μœΌλ‘œ λ„μ›€λ˜λŠ” νŒλ“€(🌟둜 ν‘œμ‹œν•΄λ‘κ² μŠ΅λ‹ˆλ‹€.)을 κΈ°λ‘ν•˜λ € ν•©λ‹ˆλ‹€. μ½”λ“œ 원본은 λ§ν¬μ—μ„œ λ°›μœΌμ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€.

CSS λ³€ν˜•(transition)을 μ‚¬μš©ν•˜λ©΄ 화면에 μ• λ‹ˆλ©”μ΄μ…˜(animation)을 κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
λ˜ν•œ, CSS3 λ³€ν˜•κ³Ό React, Vue.jsμ™€μ˜ 결합을 톡해 더 λ‹€μ–‘ν•œ μ• λ‹ˆλ©”μ΄μ…˜μ„ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ³€ν˜•(transition) 속성

CSS3μ—μ„œ μ›€μ§μž„μ„ κ΅¬ν˜„ν•˜λŠ” λ°©λ²•μ—λŠ” 크게 transition(λ³€ν˜•)κ³Ό animation(μ• λ‹ˆλ©”μ΄μ…˜) μ†μ„±μœΌλ‘œ λ‚˜λˆ„μ–΄μ§‘λ‹ˆλ‹€.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 Transition</title>
    <style>
      #graph {
        width: 610px;
        border: 3px solid black;
      }

      .bar {
        width: 10px;
        height: 50px;
        background-color: orange;
        margin: 5px;

        background-color: orange;

        /* 🌟 transition-duration: λ³€ν˜•μ΄ μ§„ν–‰λ˜λŠ” μ‹œκ°„μ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€. */
        transition-duration: 5s;

        /*
        🌟 transition-property 와 transition-duration μ‚¬μš©λ²•
        μ˜ˆμ‹œ)
        transition-property: background-color, width;
        transition-duration: 11s, 16s;
        -> λ³€ν˜•μ„ μ μš©ν•  속성을 μ •ν•˜κ³  각각의 속성에 λ³€ν˜• 진행 μ‹œκ°„μ„ 정해쀄 수 μžˆμŠ΅λ‹ˆλ‹€.
        */
      }

      #graph:hover > .bar {
        width: 600px;
      }

      .bar:nth-child(1) {
        /* 
        🌟 transition-delay: 이벀트(ex. hover)κ°€ λ°œμƒ ν›„ λͺ‡ 초 뒀에 λ³€ν˜•μ΄ μ‹œμž‘λ  것인지λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
        */
        transition-delay: 0s;

        /* 
        🌟 transition-timing-function: λ³€ν˜• 진행 정도에 λŒ€ν•œ μ‹œκ°„μ˜ ν•¨μˆ˜μž…λ‹ˆλ‹€. 
        cubic-beizer(x0, y0, x1, y1)κ³Ό 같이 μ‚¬μš©μž 지정 ν•¨μˆ˜λ„ κ°€λŠ₯ν•©λ‹ˆλ‹€.
        μ°Έκ³ : http://cubic-bezier.com/
         */
        transition-timing-function: linear;
      }
      .bar:nth-child(2) {
        transition-delay: 1s;
        transition-timing-function: ease;
      }
      .bar:nth-child(3) {
        transition-delay: 2s;
        transition-timing-function: ease-in;
      }
      .bar:nth-child(4) {
        transition-delay: 3s;
        transition-timing-function: ease-in-out;
      }
      .bar:nth-child(5) {
        transition-delay: 4s;
        transition-timing-function: ease-out;
      }

      #graph:hover > .bar:nth-child(1) {
        background-color: red;
        width: 100px;
      }
      #graph:hover > .bar:nth-child(2) {
        background-color: blue;
        width: 300px;
      }
      #graph:hover > .bar:nth-child(3) {
        background-color: green;
        width: 400px;
      }
      #graph:hover > .bar:nth-child(4) {
        background-color: yellow;
        width: 200px;
      }
      #graph:hover > .bar:nth-child(5) {
        background-color: pink;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <h1>CSS3 Transition Graph</h1>
    <div id="graph">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </body>
</html>

λ³€ν˜• 속성을 ν•œλ²ˆμ— λ‚˜νƒ€λ‚΄λ©΄ λ‹€μŒκ³Ό 같이 적을 수 μžˆμŠ΅λ‹ˆλ‹€.

div {
  /*
  🌟 property duration function delay μˆœμ„œμž…λ‹ˆλ‹€.
  각각의 property에 λ‹€λ₯Έ λ³€ν˜•μ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  */
  transition: background-color 5s ease 2s, width 10s linear 5s;
}

ν‚€ ν”„λ ˆμž„κ³Ό μ• λ‹ˆλ©”μ΄μ…˜(animation) 속성

λ³€ν˜•(transition)κ³Ό 속성 및 ν‚€μ›Œλ“œμ˜ 차이가 μžˆμ„ 뿐, 양식이 거의 λΉ„μŠ·ν•©λ‹ˆλ‹€.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS3 Animation</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        position: relative;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 100px;
        text-align: center;
        background: linear-gradient(to bottom, #cb60b3, #db36a4);

        animation-name: jayden; /* 🌟 μ μš©ν•  μ• λ‹ˆλ©”μ΄μ…˜ 이름을 μ§€μ •ν•©λ‹ˆλ‹€. */
        animation-duration: 2s; /* 🌟 μ• λ‹ˆλ©”μ΄μ…˜μ˜ 지속 μ‹œκ°„μ„ μ§€μ •ν•©λ‹ˆλ‹€. */
        animation-iteration-count: infinite; /* 🌟 μ• λ‹ˆλ©”μ΄μ…˜μ΄ 반볡될 횟수λ₯Ό μ •ν•©λ‹ˆλ‹€. */

        animation-direction: alternate;
        /* 
        🌟 μ• λ‹ˆλ©”μ΄μ…˜μ˜ 진행방ν–₯으둜 
        `alternate` - fromμ—μ„œ to둜 진행 ν›„ toμ—μ„œ from으둜 λ‹€μ‹œ μ§„ν–‰ν•©λ‹ˆλ‹€.
        `normal` - fromμ—μ„œ to둜만 μ§„ν–‰ν•©λ‹ˆλ‹€.
        */

        animation-timing-function: linear;
        /* 
        🌟 μ• λ‹ˆλ©”μ΄μ…˜ 진행 정도에 λŒ€ν•œ μ‹œκ°„μ˜ ν•¨μˆ˜μž…λ‹ˆλ‹€. 
        cubic-beizer(x0, y0, x1, y1)κ³Ό 같이 μ‚¬μš©μž 지정 ν•¨μˆ˜λ„ κ°€λŠ₯ν•©λ‹ˆλ‹€.
        μ°Έκ³ : http://cubic-bezier.com/
         */

        /*
        🌟 animation-play-state
        μ• λ‹ˆλ©”μ΄μ…˜μ˜ ν”Œλž˜μ΄ μƒνƒœλ₯Ό μ§€μ •ν•˜λŠ” κ²ƒμœΌλ‘œ λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
        
        .box:hover {
          animation-play-state: paused;
        }

        즉, 마우슀λ₯Ό 올리면 μ• λ‹ˆλ©”μ΄μ…˜μ΄ 정지(paused)κ°€ λ©λ‹ˆλ‹€.
        이외에도 inherit, initial, running, unset λ“±μ˜ μ—¬λŸ¬ ν‚€μ›Œλ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.(MDN κ³΅μ‹λ¬Έμ„œ μ°Έκ³ )
        */
      }

      #box > h1 {
        line-height: 200px;
      }

      /*
      🌟 ν‚€ ν”„λ ˆμž„ κ·œμΉ™(keyframes @-rule)이라고 λΆ€λ₯΄λ©° CSS3μ—μ„œ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ§€μ •ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€.
      `@keyframes 이름` ν˜•νƒœλ‘œ μž…λ ₯ν•©λ‹ˆλ‹€.
      λ˜ν•œ, ν‚€ ν”„λ ˆμž„ μ•ˆμ—μ„œλŠ” νΌμ„ΌνŠΈ λ‹¨μœ„(μ‹œκ°„ κΈ°μ€€)둜 μ• λ‹ˆλ©”μ΄μ…˜μ„ μ μš©ν•©λ‹ˆλ‹€.
      from은 μ‹œμž‘(0%)이며 toλŠ” 끝(100%)λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

      ex) duration이 10s일 λ•Œ, 50%에 ν•΄λ‹Ήν•˜λŠ” 건 5sμž…λ‹ˆλ‹€. 
      즉 50%에 ν•΄λ‹Ήν•˜λŠ” μŠ€νƒ€μΌλ‘œ μ• λ‹ˆλ©”μ΄μ…˜λ˜λŠ”λ° 5sκ°€ κ±Έλ¦°λ‹€λŠ” λœ»μž…λ‹ˆλ‹€.
      */
      @keyframes jayden {
        from {
          left: 0;
          transform: rotate(0deg);
        }
        50% {
          left: 500px;
        }
        to {
          left: 500px;
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="box">
      <h1>Rotation</h1>
    </div>
  </body>
</html>

μ• λ‹ˆλ©”μ΄μ…˜ 속성을 ν•œλ²ˆμ— λ‚˜νƒ€λ‚΄λ©΄ λ‹€μŒκ³Ό 같이 적을 수 μžˆμŠ΅λ‹ˆλ‹€.

div {
  /* 🌟 name duration function delay count direct μˆœμ„œλ‘œ μ μŠ΅λ‹ˆλ‹€. */
  animation: jayden 2s linear 1s infinite alternate;
}