css-16: animation-2

animation-2

아이콘 하나씩 아래에서 위로 올라오게 하기

    <nav class="nav">
      <ul class="nav__list">
        <li class="nav_btn">
          <a class="nav__link" href="friends.html">
            <i class="fa-regular fa-user fa-2x"></i>
          </a>
        </li>
        <li class="nav_btn">
          <a class="nav__link" href="chats.html">
            <span class="nav_notification">1</span>
            <i class="fa-regular fa-comment fa-2x"></i>
          </a>
        </li>
        <li class="nav_btn">
          <a class="nav__link" href="find.html">
            <i class="fa-solid fa-magnifying-glass fa-2x"></i>
          </a>
        </li>
        <li class="nav_btn">
          <a class="nav__link" href="more.html">
            <i class="fa-solid fa-ellipsis fa-2x"></i>
          </a>
        </li>
      </ul>
    </nav>

.nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f9f9fa;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 50px;
  box-sizing: border-box;
}

.nav__list {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 20px 50px;
  list-style: none;
}

.nav__link {
  color: #2e363e;
}

@keyframes appearBtnAnimation {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.nav_btn {
  opacity: 0;
  transform: translateY(50px);
  animation: appearBtnAnimation 0.3s ease-in-out forwards;
}

.nav_btn:nth-child(2) {
  animation-delay: 0.6s;
}

.nav_btn:nth-child(3) {
  animation-delay: 0.9s;
}
.nav_btn:last-child {
  animation-delay: 1.2s;
}

.nav_notification {
  background-color: tomato;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  color: white;
  position: absolute;
  bottom: 16px;
  left: 17px;
  font-weight: 600;
}

---

y축으로 360도 돌면서, 위로 통통 튀게 하기

@keyframes notificationAnimation {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-5px) rotateY(360deg);
  }
  100% {
    transform: none;
  }
}

.nav_notification {
  background-color: tomato;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  color: white;
  position: absolute;
  bottom: 16px;
  left: 17px;
  font-weight: 600;
  animation: notificationAnimation 2s ease-in-out infinite;
}

---

톱니바퀴 굴리기

    <header class="screen-header">
      <h1 class="screen-header__title">More</h1>
      <div class="screen-header__icons">
        <span><i class="fa-solid fa-magnifying-glass fa-2x"></i></span>
        <span><i class="fa-solid fa-music fa-2x"></i></span>
        <span
          ><a href="settings.html"><i class="fa-solid fa-gear fa-2x"></i></a
        ></span>
      </div>
    </header>

.screen-header {
  display: flex;
  justify-content: space-between;
  /* margin: 30px 30px; */
  align-items: center;
  padding: var(--horizontal-space);
  padding-top: 50px;
}
.screen-header__icons span {
  margin-left: 25px;
}

.screen-header__title {
  font-size: 32px;
  font-weight: 600;
  /* margin-top: 40px; */
}

@keyframes rotateGear {
  from {
    transform: none;
  }
  to {
    transform: rotateZ(360deg);
  }
}

.screen-header__icons .fa-gear:hover {
  animation: rotateGear 1s linear infinite;
}

---

심장박동 표현하기

    <div class="open-post">
      <div class="open-post__column">
        <h5 class="open-post__title">#BTS</h5>
        <h6 class="open-post__hashtags">#Bts#army#friends</h6>
        <div class="open-post__members">
          <img src="https://avatars.githubusercontent.com/u/112338209" />
          <span class="open-post__members-count">802 members</span>
          <div class="divider"></div>
          <span class="open-post__members-status">Active</span>
        </div>
      </div>
      <div class="open-post__column">
        <img src="https://avatars.githubusercontent.com/u/112338209" />
        <div class="open-post__heart-count">
          <i class="fa-regular fa-heart"></i> <span>326</span>
        </div>
      </div>
    </div>

.open-chat {
  padding-bottom: 1000px;
}

.open-chat__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  opacity: 0.8;
}

.open-chat__header span {
  opacity: 0.6;
}

.open-post {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.open-post__title {
  font-weight: 800;
  margin-bottom: 7px;
}

.open-post__hashtags {
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 7px;
}

.open-post__members {
  display: flex;
  align-items: center;
}

.open-post__members img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}

.open-post__members-count {
  opacity: 0.5;
  font-size: 14px;
}

.open-post__members .divider {
  width: 2px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.2);
  margin: 0px 5px;
}

.open-post__members-status {
  color: #ffb0e0;
}

.open-post__column:last-child img {
  width: 120px;
  height: 120px;
  border-radius: 10%;
}

.open-post__column:last-child {
  position: relative;
}

.open-post__heart-count {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 10px;
  border-radius: 20px;
  font-size: 12px;
}

.open-post__heart-count span {
  padding-left: 5px;
}

@keyframes heartBeat {
  0% {
    color: white;
    transform: none;
  }
  50% {
    color: tomato;
    transform: scale(1.5);
  }
  100% {
    color: white;
    transform: none;
  }
}

.open-post__heart-count:hover i {
  will-change: transform;
  animation: heartBeat 1s linear infinite;
}