Cara Membuat Text Animations Dengan CSS

Cara Membuat Text Animations Dengan CSS – untuk mendesain sebuah blog memang erat kaitannya dengan style CSS karena paling tidak sebelum menerapkan ke dalam elemen tertentu pada blog terlebih dahulu wajib kita ketahui dasarnya dahulu agar lebih mudah nantinya pada waktu akan mendeklarasikan kedalam sebuah template. Pada tutorial ini akan saya bahas sedikit mengenai tata cara agar dapat membuat sebuah text animasi yang tidak luput menggunakan fungsi CSS untuk memaksimalkan maupun melengkapi dari apa yang sudah pernah di bahas pada artikel artikel sebelumnya dalam penggunaan CSS. Ini nanti bisa di kembangkan untuk melengkapi sedikit keperluan blog dimana tergantung dari keinginan untuk menerapkannya, misal ingin di gunakan untuk title blog pada tag header maupun lainnya. Agar lebih mudah, dibawah terdapat coding beserta demonya silahkan di lihat dan di pahami mungkin nanti dapat menjadi inspirasi untuk apa dan digunakan bagaimana dalam upaya penerapannya langkah memanipulasi template blog. Berikut tutorialnya Cara Membuat Text Animations Dengan CSS.

Pertama untuk membuat teks glow, misal ingin membuat teks menjadi lebih menyala dan berkedip maka kodenya seperti dibawah ini.

Ini kode CSS untuk Membuat Text Animations

.textglow{ text-align:center; font-size:30px; color:#fff; animation:blur .75s ease-out infinite; text-shadow:0px 0px 5px #fff, 0px 0px 7px #fff; }
@keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;} }

Ini kode HTML untuk Membuat Text Animations

<div class="textglow">
mas-andes.blogspot.com
</div>

Hasilnya seperti dibawah ini

mas-andes.blogspot.com

Contoh lain untuk membuat efek pada teks agar seakan-akan seperti bergelombang.

Ini kode CSS untuk Membuat Text Animations

.textmetalic { text-align: center; font-size: 30px; color: transparent; letter-spacing: -3px;}
.textmetalic span { text-shadow: 0 0 2px rgba(204, 208, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { to { text-shadow: 0 0 2px rgba(204, 208, 212,0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} }
.textmetalic span:nth-child(2) { animation-delay:0.2s; }
.textmetalic span:nth-child(3) { animation-delay:0.4s; }
.textmetalic span:nth-child(4) { animation-delay:0.6s; }
.textmetalic span:nth-child(5) { animation-delay:0.8s; }
.textmetalic span:nth-child(6) { animation-delay:1s; }
.textmetalic span:nth-child(7) { animation-delay:1.2s; }

Ini kode HTML untuk Membuat Text Animations

<div class="textmetalic">
<span>m</span> <span>a</span> <span>s</span> <span>-</span> <span>a</span> <span>n</span> <span>d</span> <span>e</span> <span>s</span> <span>.</span> <span>b</span> <span>l</span> <span>o</span> <span>g</span> <span>s</span> <span>p</span> <span>o</span> <span>t</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span>
</div>

Hasilnya seperti dibawah ini

m a s - a n d e s . b l o g s p o t . c o m

Yang ini untuk membuat teks agar bisa bergerak.

Ini kode CSS untuk Membuat Text Animations

@yellow: #ebb221;
@shadow-for-yellow: #F35747;
@blue: #90f0d2;
@shadow-for-blue: #3988a6;
.textsway { color: #fff; font-size: 20px; width: 320px; margin: 10px auto; text-align: center; }
.bigger {
display: block; margin-bottom: .25em; font-size: 30px; color: @yellow; text-shadow: 1px  1px  0 fade(@shadow-for-yellow, 100%), 2px  2px  0 fade(@shadow-for-yellow, 90%), 3px  3px  0 fade(@shadow-for-yellow, 80%), 4px  4px  0 fade(@shadow-for-yellow, 70%), 5px  5px  0 fade(@shadow-for-yellow, 60%), 6px  6px  0 fade(@shadow-for-yellow, 50%), 7px  7px  0 fade(@shadow-for-yellow, 40%), 8px  8px  0 fade(@shadow-for-yellow, 30%), 9px  9px  0 fade(@shadow-for-yellow, 20%), 10px 10px 0 fade(@shadow-for-yellow, 10%); animation: jumptext 1s steps(8, start) infinite; transition: all .2s ease;
&:hover { animation: none; letter-spacing: normal; }
}
.regular { display: block; }
.regular + .regular { animation-delay: .5s; }
.buzz {
display: inline-block; text-shadow: 2px 0 0 fade(#fff, 30%), -2px 0 0 fade(#fff, 30%); animation: buzz .04s linear infinite alternate; transition: all .2s ease;
&:hover { animation: none; text-shadow: none; }
}
@keyframes jumptext {
0% { transform: rotate(-5deg); letter-spacing: normal; }
50% { transform: rotate(5deg); color: @blue; letter-spacing: 0.1em; text-shadow: 1px  1px  0 fade(@shadow-for-blue, 100%), 2px  2px  0 fade(@shadow-for-blue, 80%), 3px  3px  0 fade(@shadow-for-blue, 60%), 4px  4px  0 fade(@shadow-for-blue, 40%), 5px  5px  0 fade(@shadow-for-blue, 20%); }
100% { transform: rotate(-5deg); color: @yellow; letter-spacing: normal; }
}
@keyframes text-flasher {
0%   {  }
50%  { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
60%  { text-shadow: 0 0 2px #000, 0 0 10px fade(#fff, 50%); }
100% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
}
@keyframes buzz {
0%   { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}

Ini kode HTML untuk Membuat Text Animations

<div class="textsway">
<span class="bigger">mas-andes.blogspot.com</span>
<span class="buzz">Portal Blogger Tutorial</span>
</div>

Hasilnya seperti dibawah ini

mas-andes.blogspot.com Portal Blogger Tutorial

Sedikit mengambil contoh dari yang pertama, misalkan saja ingin di fungsikan pada button dengan menggunakan CSS transition untuk membuat efek hover. Berikut contoh sederhananya:

Ini kode CSS untuk Membuat Button Animations

@keyframes glow {
0% { box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); border-color: rgba(0,0,255,0.5); }
100% { box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0); border-color: rgba(0,0,255,1.0); }
}
#animasibutton { width:100px; margin:10px auto; }
#animasibutton button { width: 100px; padding: 5px; background: #cde; border: 2px solid #ccc; border-color: rgba(0,0,255,0.5); font-size:18px; color: #000; text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px; text-align: center; box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); }
#animasibutton button:hover, #animasibutton button.hover_effect  { background-color:#cce; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }

Ini kode HTML untuk Membuat Button Animations

<div class="animasibutton">
<button> Button </button>
</div>

Hasilnya seperti dibawah ini

Memang masih sedikit terbatas jika hanya menggunakan fungsi CSS untuk membuat text animations. Jika ingin lebih banyak efek yang digunakan kita bisa memaksimalkannya lagi dengan tambahan jQuery.