전환과 변환 3

웹프로그래밍 CSS3/CSS전환 & 변환

전환과 변환 3

별초롱언니 2025. 3. 16. 01:17

큐빅 베이지 타이밍 함수

원하는대로 타이밍을 조절할 때 사용

기본값은 cubic-bezier(0.25, 0.1, 0.25, 1.0)

속성값 이름	큐빅 베이지 타이밍 설정값
ease	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	cubic-bezier(0, 0, 1, 1)
ease-in	cubic-bezier(0.42, 0, 1, 1)
ease-out	cubic-bezier(0, 0, 0.58, 1)
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 50px;
      border: 1px solid black;
      background-color: yellow;
      transition: width 3s;
    }
    #div1 {
      transition-timing-function: linear;
    }
    #div2 {
      transition-timing-function: ease;
    }
    #div3 {
      transition-timing-function: ease-in;
    }
    #div4 {
      transition-timing-function: ease-out;
    }
    #div5 {
      transition-timing-function: ease-in-out;
    }
    #div6 {
      transition-timing-function: cubic-bezier(0.1, 0.0, 0.1, 1.0);
    }
    div:hover {
      width: 400px;
    }
    
  </style>
</head>
<body>
  <div id="div1">linear</div>
  <div id="div2">ease</div>
  <div id="div3">ease-in</div>
  <div id="div4">ease-out</div>
  <div id="div5">ease-in-out</div>
  <div id="div6">cubic-bezier</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      margin: 50px;
      background-color: yellow;
      border: 5px solid black;
      transition-duration: 5s;
      transition-delay: 3s;
    }
    div:hover {
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div>마우스를 올리고 3초 후에 박스가 180도 회전합니다.</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      color: inherit;
      text-decoration: none;
    }
    a {
      text-decoration: none;
    }
    div {
      background-color: brown;
      width: 80px;
      height: 50px;
      position: absolute;
      transition-property: width, background-color, color;
      transition-duration: 2s, 2s, 1s;
      transition-timing-function: linear;
      line-height: 50px;
      color: white; 
    }
    div:hover { 
      width: 200px;
      font-size: 30pt;
      text-align: center;
      background-color: blue;
      color: aqua
    }
  </style>
</head>
<body>
  <div style="top: 50px;"><a href="#" target="new">HOME</a></div>
  <div style="top: 100px;"><a href="#" target="new">ABOUT</a></div>
  <div style="top: 150px;"><a href="#" target="new">NEWS</a></div>
  <div style="top: 200px;"><a href="#" target="new">STUDY</a></div>
  <div style="top: 250px;"><a href="#" target="new">CONTACT</a></div>
</body>
</html>