CSS Membuat Tulisan Jatuh Sendiri

CSS Membuat Tulisan Jatuh Sendiri - Percobaan di atas adalah menggunakan CSS, saya sendiri masih bingung memahami maksud dari programnya hanya saja ini untuk Share rasanya tidak salah jika saya bagikan disini. Saya tidak bisa banyak nulis disini karena memang ini saya gag ngerti untuk maksud dari sciptnya, silahkan di coba sendiri.

Pada dasarnyascript ini sebenarnya ada lima contoh dengan variasi text berbeda, namun nantinya saya share satu persatu, sambil juga untuk memenuhi postingan, heee.

Oke sekarang silahkan dilihat scriptnya dan anda bisa langsung mencobanya sendiri di blog anda.

Script HTML

 <div class="rw-sentence">
  <span>Lihat Apa Ya :</span>
  <div class="rw-words rw-words-1">
    <span>Apa itu..??</span>
    <span>Apa Ini..??</span>
    <span>Apa Dia..??</span>
    <span>Apa saja..??</span>
    <span>Apa Bukan..??</span>
    <span>Apa Susah..??</span>
  </div>
</div>

Script CSS

 .rw-sentence { 
    margin: 0 auto;
    text-align: left;
    width: 400px;
  }
  .rw-sentence span { 
    color: #AAA;
    font-size: 30px;
  }
  .rw-words { 
    display: inline;
    text-indent: 10px;
  }
  .rw-words-1 span { 
    color: White;
    position: absolute;
    opacity: 0;
    overflow: hidden;
  
    -moz-transform-origin: 10% 75%;
    -webkit-transform-origin: 10% 75%;
    -o-transform-origin: 10% 75%;
    -ms-transform-origin: 10% 75%;
    transform-origin: 10% 75%;
    -moz-animation: rotateWord 18s linear infinite 0s;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -o-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
  }
  
  .rw-words span:nth-child(2) { 
    color: Red;
    -moz-animation-delay: 3s; 
    -webkit-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
  }
  .rw-words span:nth-child(3) { 
    color: Aqua;
    -webkit-animation-delay: 6s; 
    -moz-animation-delay: 6s; 
    -o-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s;
  }
  .rw-words span:nth-child(4) { 
    color: Bisque;
    -moz-animation-delay: 9s; 
    -webkit-animation-delay: 9s; 
    -o-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s;
  }
  .rw-words span:nth-child(5) { 
    color: CadetBlue;
    -moz-animation-delay: 12s; 
    -webkit-animation-delay: 12s; 
    -o-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s;
  }
  .rw-words span:nth-child(6) { /
    color: Yellow;
    -moz-animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
    -o-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s;
  }
  @-moz-keyframes rotateWord { /* Firefox */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -moz-transform: rotate(0deg); }
    19% { opacity: 1; -moz-transform: rotate(98deg); }
    21% { opacity: 1; -moz-transform: rotate(86deg); }
    23% { opacity: 1; -moz-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -moz-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-webkit-keyframes rotateWord { /* Chrome/Safari */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -webkit-transform: rotate(0deg); }
    19% { opacity: 1; -webkit-transform: rotate(98deg); }
    21% { opacity: 1; -webkit-transform: rotate(86deg); }
    23% { opacity: 1; -webkit-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -webkit-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-o-keyframes rotateWord { /* Opera */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -o-transform: rotate(0deg); }
    19% { opacity: 1; -o-transform: rotate(98deg); }
    21% { opacity: 1; -o-transform: rotate(86deg); }
    23% { opacity: 1; -o-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -o-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord { /* IE IE9/10 */
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; -ms-transform: rotate(0deg); }
    19% { opacity: 1; -ms-transform: rotate(98deg); }
    21% { opacity: 1; -ms-transform: rotate(86deg); }
    23% { opacity: 1; -ms-transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; -ms-transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes rotateWord { 
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
    19% { opacity: 1; transform: rotate(98deg); }
    21% { opacity: 1; transform: rotate(86deg); }
    23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
    25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
    80% { opacity: 0; }
    100% { opacity: 0; }
  }

Untuk DEMO nya bisa anda lihat dibawah ini.

Lihat Apa Ya :

Apa itu..?? Apa Ini..?? Apa Dia..?? Apa saja..?? Apa Bukan..?? Apa Susah..??

Dukung saya di Contest Blog " HMPS TI Unikama dan Kampus Multikultural " dengan memberi komentar di artikel saya, thanks.