[HTML/CSS] transform & animation 으로 매끄러운 애니메이션 만들기

💡 실습 포인트!

💜 흔들흔들 버튼

<button class="ani-button">흔들흔들</button>

 

.ani-button {
  padding: 15px 20px;
  font-size: 20px;
  background: skyblue;
  color: white;
  border: none;
  border-radius: 5px;
  display: block;
  margin: 30px auto;
  cursor: pointer;
}

.ani-button:hover {
  animation-name: shake;
  animation-duration: 1s;
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

---

💜 회전하는 + 버튼

<div class="ani-x">+</div>

 

.ani-x {
  margin: 150px auto;
  text-align: center;
  font-size: 70px;
  width: 84px;
  cursor: pointer;
}

.ani-x:hover {
  animation-name: turn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(45deg) scale(1.5);
  }
}

---

💜 슬라이드되는 검은 메뉴

    <nav class="ani-navbar">
        <h4>Menu</h4>
        <p>Item1</p>
        <p>Item2</p>
        <p>Item3</p>
    </nav>

 

.ani-navbar {
  width: 200px;
  background: black;
  color: white;
  height: 100%;
  padding: 25px;
  position: fixed;
  z-index: 5;
  text-align: right;
  transition: all 1s;
  transform: translateX(-180px);
}

.ani-navbar:hover {
  transform: translateX(0px);
  text-align: center;
  cursor: pointer;
}

@keyframes slide {
  0% {
    transform: translateX(-250px);
  }
  50% {
    transform: translateX(50px) skewX(-30deg);
  }
  100% {
    transform: translateX(0px);
  }
}

.ani-navbar:hover p {
  animation-name: slide;
  animation-duration: 1s;
  padding: 10px 15px;
}