Membuat Efek CSS Animasi Pada Tulisan

Membuat Efek CSS Animasi Pada Tulisan - Ragam dan cara membuat teks pada tulisan artikel blog sangat bervariatif, dari membuat teks berkedip dengan kode blink, membuat teks bergerak dan berjalan seperti pada artkel saya sebelumnya yang dapat Anda baca detailnya pada link dibawah ini

Menghias blog dengan - Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan

Dari sekian banyak tutorial yang membahas tentang teks style tersebut, namun saya belum menemukan tutorial yang membahas tentang Membuat Efek CSS Animasi Pada Tulisan, jika efek salju pada blog, efek daun berguguran atau membuat link bergoyang mungkin hal ini tidak asing lagi buat Anda, namun kali ini saya akan coba mendesain teks yang ada pada artikel blog Anda dengan efek gugur, singkatnya teks yang saya beri animasi akan jatuh dan berganti dengan teks berikutnya, seperti yang terlihat pada gambar dibawah ini

Baca juga - Efek Tumpukan Kertas Pada Laman Posting

//* falling words in animasi effect with css3
input css : id='sb77','sahabatblogger77'
show date : April 12, 2014
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.sb77-wrapper{
   width: 80%;
   position: relative;
   margin: 110px auto 0 auto;
   font-family: 'Bree Serif';
   padding: 10px;
   height: 400px;
   overflow: hidden;}

.sb77-sentence{
   margin: 0;
   text-align: left;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.sb77-sentence span{
   color: #444;
   white-space: nowrap;
   font-size: 200%;
   font-weight: normal;}

.sb77-words{display: inline;text-indent: 10px;}
.sb77-words-1 span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   color: #888;
   transform-origin: 10% 75%;
   animation: rotateWord 18s linear infinite 0s;}

.sb77-words span:nth-child(2) {
   animation-delay: 3s;
   color: #6b889d;}

.sb77-words span:nth-child(3) {
   animation-delay: 6s;
   color: #6b739d;}
// lanjutkan jika ingin menambahkan teks lagi
.sb77-words span:nth-child(4) {
....
....}

@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;}}
@media screen and (max-width: 768px){
   .sb77-sentence { font-size: 18px; }}
@media screen and (max-width: 320px){
   .sb77-sentence { font-size: 9px; }}

<section class="sb77-wrapper" id="sahabatblogger77">
<h2 class="sb77-sentence">
<span>Cara Membuat Efek Teks Jatuh</span>
<span>Contoh teks</span>
<div class="sb77-words sb77-words-1">
<span>Kamu Cantik</span>
<span>Tetapi Galak</span>
<span>Cerewet Lagi</span>
<span>Tetapi..!!</span>
<span>Aku Tetap</span>
<span>Sayang sama kamu</span>
</div>
</h2>
</section>

DEMO SHOW


Jika semua sahabat pecinta SAHABAT BLOGGER 77 ingin memberikan sedikit sentuhan CSS animasi pada tulisan Artikel blog Anda, maka ikuti jalan kebenaran saya ini..hehe.!!

1. Copy dan letakkan kode CSS diatas sebelum kode  ]]></b:skin> 
2. Untuk HTML, Copy kodenya dan tempatkan pada saat Anda akan membuat tulisan baru mode HTML bukan Compose ya..!!
3. Ganti teks yang saya beri warna  Orange  dengan tulisan yang Anda suka
4. Semoga apa yang saya bagikan ini dapat menjadi bahan diskusi buat kita semua, untuk kita bahas pada kolom komentar dibawah, saya akan menjawab jika Anda mengalami kesulitan pada kode-kode diatas
5. Terimakasih dan Happy week end