Animasi batas CSS

Melihat beberapa cara untuk menganimasikan batas di CSS

Bramus

Menetapkan batas

Ada beberapa metode yang tersedia untuk menetapkan batas pada sebuah elemen: border, outline, dan box-shadow. Seperti dijelaskan dalam 3 Metode CSS untuk Menambahkan Batas Elemen oleh Stephanie Eckles, setiap pendekatan memiliki kelebihan dan kekurangannya masing-masing–terutama dalam hal menganimasikan batas. Alasan utama untuk tidak menggunakan border CSS yang tepat adalah untuk tujuan animasi.

Sebuah artikel yang baru-baru ini menarik perhatian saya adalah Animasi batas CSS yang fantastis, tempat penulis Coco mengeksplorasi lebih banyak opsi. Dengan memasukkan konten yang dihasilkan menggunakan ::before dan ::after, alat ini membuat batas tiruan yang kemudian dianimasikan.

Apa yang paling menonjol bagi saya adalah visualisasi animasi pendukung yang digunakan dalam artikel. Prinsip ini sangat membantu menjelaskan apa yang sebenarnya dilakukan untuk mencapai efek yang diinginkan.

Lapisan putih dan garis berwarna merupakan konten yang dihasilkan. Dengan memudarkan lapisan putih ke dalam dan ke luar, cara tumpukannya dan cara kerja animasi menjadi jelas.

Mempertahankan model kotak

Kelemahan penggunaan Konten yang Dihasilkan untuk meniru garis batas adalah Anda akan memiliki model kotak yang rusak: konten kini dapat mengaburkan batas tiruan karena “batas” tersebut dilukis di bawahnya. Untuk mengurangi, Anda harus menerapkan border-width yang diinginkan sebagai padding.

Untuk mendapatkan batas yang sebenarnya, sehingga mempertahankan cara kerja model kotak, Anda dapat menggunakan beberapa latar belakang yang kemudian direntangkan ke area batas.

Dasar-dasar

Mari kita mulai dengan membuat batas titik-titik dan menambahkan beberapa latar belakang.

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

Mengubah ukuran latar belakang dengan background-origin

Seperti yang Anda lihat, ada sesuatu yang lucu terjadi dengan latar belakang di sini: latar belakang dilukis di dalam batas, tetapi tampaknya conic-gradient semuanya salah. Ini sebenarnya adalah perilaku yang dimaksudkan: secara default gambar latar tidak digambar ke dalam batas karena asalnya adalah padding-box elemen. Bagaimanapun, untuk membuat batas, gambar latar yang disetel diulang dalam batas itu sendiri, menghasilkan efek visual yang aneh.

Untuk mengatasi masalah ini, Anda perlu merentangkan latar belakang sehingga juga menempati ukuran batas. Anda dapat melakukannya secara manual dengan merentangkan dan mengubah posisi latar belakang, tetapi yang terbaik adalah menggunakan properti background-origin untuk menyesuaikan ukuran latar belakang terhadap border-box.

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

background-origin: border-box;

Penambahan ini membuat semuanya terlihat jauh lebih baik:

Menyingkat lapisan latar belakang putih dengan background-clip

Karena latar belakang menghabiskan semua ruang saat ini, lapisan semi-transparan perlu diperkecil lagi. Daripada mengutak-atik background-size lagi, ada cara yang lebih mudah untuk melakukannya: gunakan background-clip dan setel ke padding-box. Dengan begitu, latar belakang tidak lagi digambar di bawah area batas.

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

Terakhir, buat batas transparent agar memiliki efek penuh.

border: 0.3rem dotted transparent;

Animasi

Untuk memulihkan animasi batas, Anda dapat memanipulasi sudut awal conic-gradient.

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

Berkat @property, hal ini menjadi sangat mudah di browser yang mendukungnya:

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Jika digabungkan, kodenya menjadi:

Konten Bonus: border-image

Pendekatan yang telah dibahas sebelumnya untuk menggambar batas gradien adalah menggunakan CSS border-image.

Ini memungkinkan kode yang lebih disederhanakan karena Anda tidak perlu menangani latar belakang yang tumpang tindih. Animasi dapat diterapkan dengan cara yang sama seperti sebelumnya.

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

Namun, Anda akan melihat beberapa hal yang tidak lagi berfungsi dengan pendekatan ini:

• border-image tidak mengikuti border-radius; kode akan selalu tetap persegi panjang.
• Saat menetapkan border-image-slice untuk mengisi, border-image tidak dilukis di bawah background yang ditetapkan, tetapi di bagian atas. Hal ini dapat merepotkan jika Anda ingin latar belakang menjadi semi-transparan.

Pada penutupan

Ada banyak kemungkinan untuk menganimasikan batas di CSS. Tergantung pada kasus penggunaan, Anda dapat memanfaatkan salah satunya.