Animasi Memantul Panah Bawah CSS Murni

sukma
sukma
3 minute read

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara membuat animasi pantulan panah bawah CSS menggunakan CSS3 murni. Pada dasarnya, animasi panah seperti itu dapat digunakan di menu dropdown, akordeon atau semacamnya.

Kami melihat banyak situs web menggunakan spanduk atau penggeser layar penuh. Jadi, ada baiknya untuk tetap memperhatikan pengguna beberapa informasi yang tersedia di bawah area.

Umumnya, ketika kita menambahkan beberapa animasi ke suatu elemen, itu akan lebih terlihat dan menarik pengguna. Pengguna dapat dengan cepat memahami bahwa ini adalah sesuatu yang mengarah ke lebih banyak informasi.

Dengan mengklik panah bawah, pengguna akan dapat melihat lebih banyak informasi di halaman yang sama.

Ini praktik terbaik untuk menggunakan hanya CSS untuk hal sekecil itu. Skrip kecil ini membantu Anda membuat panah animasi. Kami tidak perlu banyak membuat kode untuk menyelesaikan ini.

Semua yang kita butuhkan untuk menggunakan animasi bounce yang dapat kita lakukan dengan mudah menggunakan CSS @ -keyframes properti. Kami juga menggunakan properti transformasi untuk menangani posisi Y-enamnya.

Markup Dasar untuk Panah Bawah

Pertama mari kita lihat kode HTML yang memiliki div dengan dua kelas berbeda. Kelas satu downArrow Izinkan kami untuk mengatur posisi panah tengah halaman.

Kelas selanjutnya bounce digunakan untuk membuat animasi.

<div class="downArrow bounce">   <img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNC4yODUsMTEuMjg0TDE2LDE5LjU3MWwtOC4yODUtOC4yODhjLTAuMzk1LTAuMzk1LTEuMDM0LTAuMzk1LTEuNDI5LDAgIGMtMC4zOTQsMC4zOTUtMC4zOTQsMS4wMzUsMCwxLjQzbDguOTk5LDkuMDAybDAsMGwwLDBjMC4zOTQsMC4zOTUsMS4wMzQsMC4zOTUsMS40MjgsMGw4Ljk5OS05LjAwMiAgYzAuMzk0LTAuMzk1LDAuMzk0LTEuMDM2LDAtMS40MzFDMjUuMzE5LDEwLjg4OSwyNC42NzksMTAuODg5LDI0LjI4NSwxMS4yODR6IiBmaWxsPSIjMTIxMzEzIiBpZD0iRXhwYW5kX01vcmUiLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=" /> </div>

Kami telah menempatkan tag gambar dan menambahkan jalur SVG untuk Ikon. Anda dapat meletakkan ikon Gambar Anda di sini atau dapat menentukan bentuk font di CSS secara langsung.

Gaya CSS untuk Animasi Bouncing

Untuk penataan, mari kita mulai dengan body tag. Untuk menata bodi, saya mengatur warna latar belakang oranye yang indah agar terlihat lebih menarik.

Ini mungkin tidak diperlukan jika Anda mengerjakan template Anda sendiri. Saya telah menambahkan agar demo terlihat bagus.

Selanjutnya, saya telah melakukan gaya untuk downArrow kelas dan saya telah menggunakan posisi tetap untuk penyelarasan. Nilai kiri 50% memungkinkan penggunaan untuk memusatkan elemen, dan yang paling bawah adalah 45% untuk menyelaraskan bagian tengah tubuh.

body {   background: #eb4924; } .downArrow{ 	position: fixed; 	bottom: 45%; 	left: 50%; }

Setelah itu, kami menggunakan animasi untuk kelas .bounce dan tentukan timer 3 detik. Nilai pentalan diambil dari @keyframe.

.bounce { 	-moz-animation: bounce 3s infinite; 	-webkit-animation: bounce 3s infinite; 	animation: bounce 3s infinite; }

Selain itu, untuk mendapatkan dukungan browser, kami harus menggunakan keduanya @-moz for Firefox dan @-webkit for WebKit browser seperti Chrome, dll. Jadi, tambahkan juga CSS berikut ke dalam proyek Anda.

@-moz-keyframes bounce {   0%, 20%, 50%, 80%, 100% {     -moz-transform: translateY(0);     transform: translateY(0);   }   40% {     -moz-transform: translateY(-30px);     transform: translateY(-30px);   }   60% {     -moz-transform: translateY(-15px);     transform: translateY(-15px);   } } @-webkit-keyframes bounce {   0%, 20%, 50%, 80%, 100% {     -webkit-transform: translateY(0);     transform: translateY(0);   }   40% {     -webkit-transform: translateY(-30px);     transform: translateY(-30px);   }   60% {     -webkit-transform: translateY(-15px);     transform: translateY(-15px);   } } @keyframes bounce {   0%, 20%, 50%, 80%, 100% {     -moz-transform: translateY(0);     -ms-transform: translateY(0);     -webkit-transform: translateY(0);     transform: translateY(0);   }   40% {     -moz-transform: translateY(-30px);     -ms-transform: translateY(-30px);     -webkit-transform: translateY(-30px);     transform: translateY(-30px);   }   60% {     -moz-transform: translateY(-15px);     -ms-transform: translateY(-15px);     -webkit-transform: translateY(-15px);     transform: translateY(-15px);   } }

Itu dia. Kami selesai dengan tip CSS kecil ini yang akan membantu Anda membuat animasi panah bawah. Mari kita lihat demo dan sumber unduhannya.