🎨 CSS πŸ”»

CSS transition

output7 2022. 1. 1. 18:36

 

transition μ„ΈλΆ€ 속성

  • transition : all 1s ➑ all은 λͺ¨λ“  μŠ€νƒ€μΌ, 1sλŠ” 1μ΄ˆμ— κ±Έμ³μ„œ μ„œμ„œνžˆ λ³€κ²½ν•΄λ‹¬λΌλŠ” λœ»μž„
  • transition-delay: μ‹œμž‘ μ „ λ”œλ ˆμ΄
  • transition-duration: transition μž‘동 μ†λ„
  • transition-property: μ–΄λ–€ 속성에 transition 할건지 정함
  • transition-timing-function: λ™μž‘ 속도 κ·Έλž˜ν”„μ‘°μ •
      https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
 

transition-timing-function - CSS: Cascading Style Sheets | MDN

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

developer.mozilla.org

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #212529;
        position: relative;
        overflow: hidden;
      }
      .box::after {
        content: 'transition';
        bottom: 0;
        text-align: center;
        color: #228be6;
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        height: 0%;
        background-color: #ffe066;
        position: absolute;
        transition: all 1s;
      }
      .box:hover::after {
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>