keyframes 활용

처음에 배경이 나왔다가 사라지게 하기

@keyframes hideSplashScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#splash-screen {
  background-color: var(--yellow);
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 132px;
  z-index: 3;
  animation: hideSplashScreen 1s ease-in-out forwards;
}

@keyframes를 이용한다. 그리고 animation에서 forwards를 사용해야 한다. forwards는 마지막 keyframes를 기억해서 마지막 배경이 나왔다가 사라진 상태를 유지한다.

또 keyframes에서 to 부분에 visibility: hidden을 하지 않으면 배경이 사라져도 화면 클릭을 할 수 없다. 왜냐하면 우리에게는 안보이지만 브라우저 입장에서는 보이기 때문이다.

 

  animation: hideSplashScreen 0.4s ease-in-out forwards;
  animation-delay: 2s;

혹은 animation-delay를 추가하면 배경은 2초 동안 있고 0.4초만에 사라진다.

---

하단 바 왼쪽 아이콘부터 순서대로 올라오게 하기

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

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

.nav__btn:nth-child(2) {
  animation-delay: 0.5s;
}

.nav__btn:nth-child(3) {
  animation-delay: 1s;
}

.nav__btn:last-child {
  animation-delay: 1.5s;
}

-appearBtnAnimation

• to

 opacity: 0를 줘서 안보이게 한다.

 

• from

transform을 none로 해주고 opacity: 1로 해줘서 다시 재자리로 가고 아이콘이 보이게 해준다.

 

-나머지 코드

transform: translateY(50px)로 먼저 각 아이콘들의 시작 위치를 아래로 해준다. 왜냐하면 그래야 아이콘이 아래에서 위로 올라온다.

그리고 각 아이콘들에 delay를 줘서 왼쪽부터 순서대로 올라오도록 한다. 또 forwards로 기억하게 해줘야 아이콘들이 원래 자리에 고정되어 있는다.

---

하트 모양 심장 박동처럼 만들기

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

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

scale은 아이콘의 크기를 커지게 해준다. 이런 property를 will-change라고 부른다.

will-change는 기본적으로 브라우저에게 뭔가 바뀔것이라고 말해준다. 그러면 브라우저 입장에서는 애니메이션에서 뭐가 바뀔지 아니까 좀 더 낫게 만들어준다. 그리고 will-change에 어떤게 변하는건지 알려주면 된다. 결과적으로 will-change는 그래픽 카드를 이용해서 애니메이션을 가속화한다.

---

채팅방에 들어갔을 때, 대화 내용 애니메이션

@keyframes fadeIn {
  from {
    transform: translate(30px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.main-chat {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.8s linear;
}

fadeIn 이런 애니메이션은 유용하기 때문에 알아두는 것이 좋다.