[CSS] 애니메이션06 : 통!통!통! 텍스트

CSS : 애니메니션 만들기 : 통통 텍스트 애니메이션

이번 시간에는 CSS 실습으로 텍스트가 통통 튀는 애니메이션을 만들어보겠습니다~~!

---

#1. HTML

각각의 span 태그에 텍스트를 하나씩 입력해주시면 됩니다!

<h1>
  <span>t</span>
  <span>o</span>
  <span>m</span>
  <span>e</span>
  <span>t</span>
  <span>o</span>
  <span>l</span>
  <span>v</span>
  <span>e</span>
</h1>

---

#2. CSS

다음은 CSS 코드 입니다!

html, body {
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, beige 0%, salmon 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  height: 100px;
}
h1 span {
  font-family: '궁서체';
  font-size: 80px;
  color: #fff;
  position: relative;
  top: 20px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #ccc,
               0 3px 0 #ccc,
               0 4px 0 #ccc,
               0 5px 0 #ccc,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0,0,0,0.4);
  animation: bounce 0.3s ease infinite alternate;
}
h1 span:nth-child(2){
  animation-delay: 0.1s;
}
h1 span:nth-child(3){
  animation-delay: 0.2s;
}
h1 span:nth-child(4){
  animation-delay: 0.3s;
}
h1 span:nth-child(5){
  animation-delay: 0.4s;
}
h1 span:nth-child(6){
  animation-delay: 0.5s;
}
h1 span:nth-child(7){
  animation-delay: 0.6s;
}
h1 span:nth-child(8){
  animation-delay: 0.7s;
}
h1 span:nth-child(9){
  animation-delay: 0.8s;
}

@keyframes bounce {
  100%{
    top: -20px;
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #ccc,
                 0 3px 0 #ccc,
                 0 4px 0 #ccc,
                 0 5px 0 #ccc,
                 0 6px 0 transparent,
                 0 7px 0 transparent,
                 0 8px 0 transparent,
                 0 9px 0 transparent,
                 0 50px 25px rgba(0,0,0,0.4);
  }
}

---

#3. 결과보기