Tutorial Dasar CSS Membuat Efek Transisi Pada Element HTML

Hi Web Developer! kali ini guru design akan berbagi tutorial tentang bagaimana cara membuat efek transisi atau efek perpindahan pada suatu element HTML dengan menggunakan CSS, disarankan buat para blogger atau websiter yang ingin mempercantik halaman websitenya supaya terlihat mewah dan keren. Buat para master tolong di koreksi kalau-kalau ada salah, tapi saya rasa tidak ada heheh. Buat para newbie yok di simak dan dipahami. Ok lanjut ketutorial:

Disini kita akan membuat efek transisi atau perpindahan element dari bawah ke atas, atau anda menginginkan transisi yang berbeda sangat mudah tinggal rubah taransform-nya saja. Jadi efek ini akan bekerja setelah kita me-refresh halaman.

Pertama 

Disini saya mencontohkan yang akan diberi efek transisi adalah pada class post, menggunakan efek dari bawah naik keatas.

CSS

.postingan{
    animation:bawahkeatas 1s;
}
@keyframes bawahkeatas {from { transform:translate(0px, 1000px);} to {transform:translate(0px, 0px);}}
/* Jika ingin transisi lebih lama tinggalkan waktunya berapa second misal 5s; */

HTML

<div class="postingan">Anggap saja ini adalah postingan</div>

Jika anda menginginkan efek zoom dari kecil ke besar bisa gunakan code ini
CSS

.postingan{
    animation:zoom 1s;
}
@keyframes zoom {from {transform: scale(0.5);}to {transform: scale(1);}}

Result

Sekian semoga bermanfaat, terimakasih.