Sharing Teknologi – Membuat Smooth Animation HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Smooth Animation HTML CSS Di WordPress.
CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.
CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.
CSS sangat membantu meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau ketukan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.
Dengan HTML, sebuah halaman web dapat dibuat sedemikian rupa sehingga menjadi lebih interaktif dan menarik. Karena HTML menggabungkan berbagai elemen seperti teks, multimedia, link, dan elemen pendukung lainnya menjadi satu kesatuan.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..
Di kesempatan kali ini, kami akan berbagi tutorial Membuat Smooth Animation Menggunakan HTML CSS.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Smooth Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
HTML
<div class="smoothanimation position-relative p-3 my-1 overflow-hidden">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/11/Ball-2-icon.webp" class="imganim"/>
</div>
Style CSS
.smoothanimation .imganim {
position: relative;
animation: bobble 2s infinite;
padding-bottom: 50px;
}
@keyframes bobble {
0% {
transform: translate3d(0px, 0px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, 100px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, 0px, 0px);
}
}
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar