Animasi batas CSS

Melihat beberapa cara untuk menganimasikan batas di CSS

Bramus

Menetapkan batas

Ada beberapa metode yang tersedia untuk menetapkan batas pada elemen: border, outline, dan box-shadow. Seperti yang dijelaskan dalam The 3 CSS Methods for Adding Element Borders 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.

Animasi Batas menggunakan outline-offset oleh Kevin J. Powell

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, mereka membuat batas palsu yang kemudian dianimasikan.

Hal yang paling menarik bagi saya adalah visualisasi animasi pendukung yang digunakan dalam artikel tersebut. Komentar sangat membantu menjelaskan apa yang sebenarnya dilakukan untuk mencapai efek yang diinginkan.

Border Animations using generated content oleh Coco

Lapisan putih dan garis berwarna adalah konten yang dihasilkan. Dengan memudarkan lapisan putih ke dalam dan ke luar, akan terlihat jelas bagaimana lapisan tersebut ditumpuk dan bagaimana animasi bekerja.

Mempertahankan model kotak

Kelemahan penggunaan Generated Content untuk meniru batas adalah Anda akan mendapatkan model kotak yang rusak: konten kini dapat mengaburkan batas palsu karena "batas" tersebut digambar di bawahnya. Untuk mengatasinya, Anda harus menerapkan border-width yang diinginkan sebagai padding.

Untuk memiliki batas yang sebenarnya–dan dengan demikian 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 bertitik 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
  )
;

Menyesuaikan ukuran latar belakang dengan background-origin

Seperti yang Anda lihat, ada yang aneh dengan latar belakang di sini: latar belakang digambar ke dalam batas, tetapi conic-gradient tampaknya salah. Hal ini memang disengaja: secara default, gambar latar tidak digambar ke dalam batas karena asalnya adalah padding-box elemen. Untuk membuat batas, gambar latar yang ditetapkan akan diulang dalam batas itu sendiri, sehingga menghasilkan efek visual yang aneh.

Untuk mengatasi masalah ini, Anda perlu meregangkan latar belakang sehingga juga menempati ukuran batas. Anda dapat melakukannya secara manual dengan meregangkan dan memosisikan ulang latar belakang, tetapi sebaiknya gunakan properti background-origin untuk menyesuaikan ukuran latar belakang dengan border-box.

Browser Support

• 1
• 12
• 4
• 3

Source

Larangan

/* 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%);

Anjuran

background-origin: border-box;

Satu tambahan ini membuat semuanya terlihat jauh lebih baik:

Mengecilkan lapisan latar belakang putih dengan background-clip

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

Browser Support

• 1
• 12
• 4
• 5

Source

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 untuk mendapatkan 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 mudah di browser yang mendukungnya:

Browser Support

• 85
• 85
• 128
• 16.4

Source

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

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

Jika digabungkan, kodenya akan menjadi seperti ini:

Konten bonus: border-image

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

Browser Support

• 16
• 12
• 15
• 6

Source

Hal ini memungkinkan kode yang lebih sederhana 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; bentuknya akan selalu persegi panjang.
• Saat menyetel border-image-slice ke fill, border-image tidak digambar di bawah background yang ditetapkan, tetapi di atasnya. Hal ini dapat merepotkan jika Anda ingin latar belakang menjadi semi-transparan.

Sebagai penutup

Ada banyak kemungkinan untuk menganimasikan batas di CSS. Bergantung pada kasus penggunaan, Anda mungkin lebih condong ke salah satunya.