Transisi dan Animasi CSS

Contoh penggunaan keyframes untuk membuat animasi geser:

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}

div {
  animation: slide 1s ease-in-out infinite alternate;
}

Pada contoh di atas, kita menggunakan keyframes slide untuk mendefinisikan frame animasi yang akan digunakan. Animasi akan berlangsung selama 1s dengan menggunakan timing function ease-in-out dan akan berulang terus-menerus (infinite) dengan gerakan bolak-balik (alternate).

Transform CSS

Transform CSS digunakan untuk mengubah posisi, ukuran, atau bentuk elemen pada halaman web. Transformasi dapat digunakan untuk memberikan efek memutar, membesar, memutarbalik, memiringkan, dan property lainnya pada elemen tersebut. Property transform digunakan untuk menentukan transformasi pada elemen tertentu.

Contoh penggunaan property transform untuk memutar gambar dan memperbesar gambar:

img {
  transform: rotate(45deg) scale(1.5);
}

Pada contoh di atas, kita menggunakan property transform pada elemen img untuk memutar gambar sebesar 45 derajat dan memperbesar gambar sebesar 1.5 kali lipat.

Dengan menggunakan teknik transisi dan animasi CSS seperti di atas, kita dapat memberikan efek transisi atau animasi pada halaman web yang dapat meningkatkan interaksi pengguna dan membuat tampilan halaman web menjadi lebih menarik.

Follow us on