Jumping Text Effect

Jumping Text Effect

Collection Effect Description Text - Jumping Text Animation
Menggunakan perintah efek CSS @keyframes animasi-bounce untuk menggerakkan objek dengan transition-delay. Salin kode berikut, temukan kode ]]></b:skin> lalu letakkan CSS ini tepat diatasnya:

CSS Concept

@import url(http://fonts.googleapis.com/css?family=Titan+One);
.text {
  width: 100%;
  height: 100px;
  margin: auto;
  display: block;
  text-align: center;}

.text span {
  position: relative;
  top: 20px;
  display: inline-block;
  -webkit-animation: bounce .3s ease infinite alternate;
  -moz-animation: bounce .3s ease infinite alternate;
  -ms-animation: bounce .3s ease infinite alternate;
  -o-animation: bounce .3s ease infinite alternate;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 61px;
  color: blue;
  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, .4);}

.text span:nth-child(2) {-webkit-animation-delay: .1s;-moz-animation-delay: .1s;animation-delay: .1s;}
.text span:nth-child(3) {-webkit-animation-delay: .2s;-moz-animation-delay: .2s;animation-delay: .2s;}
.text span:nth-child(4) {-webkit-animation-delay: .3s;-moz-animation-delay: .3s;animation-delay: .3s;}
.text span:nth-child(5) {-webkit-animation-delay: .4s;-moz-animation-delay: .4s;animation-delay: .4s;}
.text span:nth-child(6) {-webkit-animation-delay: .5s;-moz-animation-delay: .5s;animation-delay: .5s;}
.text span:nth-child(7) {-webkit-animation-delay: .6s;-moz-animation-delay: .6s;animation-delay: .6s;}
.text span:nth-child(8) {-webkit-animation-delay: .7s;-moz-animation-delay: .7s;animation-delay: .7s;}
.text span:nth-child(9) {-webkit-animation-delay: .8s;-moz-animation-delay: .8s;animation-delay: .8s;}
.text span:nth-child(10) {-webkit-animation-delay: .9s;-moz-animation-delay: .9s;animation-delay: .9s;}
.text span:nth-child(11) {-webkit-animation-delay: 1s;-moz-animation-delay: 1s;animation-delay: 1s;}
.text span:nth-child(12) {-webkit-animation-delay: 1.1s;-moz-animation-delay: 1.1s;animation-delay: 1.1s;}
.text span:nth-child(13) {-webkit-animation-delay: 1.2s;-moz-animation-delay: 1.2s;animation-delay: 1.2s;}
.text span:nth-child(14) {-webkit-animation-delay: 1.3s;-moz-animation-delay: 1.3s;animation-delay: 1.3s;}
.text span:nth-child(15) {-webkit-animation-delay: 1.4s;-moz-animation-delay: 1.4s;animation-delay: 1.4s;}
.text span:nth-child(16) {-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;animation-delay: 1.5s;}

@-webkit-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 #CCC,0 7px 0 #CCC,0 8px 0 #CCC,0 9px 0 #CCC,0 50px 25px rgba(0, 0, 0, .2);}}

@-moz-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 #CCC,0 7px 0 #CCC,0 8px 0 #CCC,0 9px 0 #CCC,0 50px 25px rgba(0, 0, 0, .2);}}

@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 #CCC,0 7px 0 #CCC,0 8px 0 #CCC,0 9px 0 #CCC,0 50px 25px rgba(0, 0, 0, .2);}}

DEMO SHOW


HTML Markup
Coba Anda perhatikan teks yang saya beri warna Merah. Disana saya memisahkan disetiap huruf dalam text, silahkan Anda ganti dengan teks Anda.

<div class="text">
<span>S</span><span>A</span><span>H</span><span>A</span><span>B</span><span>A</span><span>T</span>&nbsp; <span>B</span><span>L</span><span>O</span><span>G</span><span>G</span><span>E</span><span>R</span>&nbsp; <span>7</span><span>7</span>
</div>

Referensi URL ➟ Ragam Model Efek Animasi Pada Teks