Contoh animasi CSS berperforma tinggi

Dalam postingan ini, temukan cara pembuatan beberapa animasi populer yang ditemukan di CodePen. Semua animasi ini menggunakan teknik berperforma tinggi yang dibahas dalam artikel lain di bagian ini.

Lihat Mengapa beberapa animasi lambat? untuk mempelajari teori di balik rekomendasi ini, dan Panduan Animasi untuk mendapatkan tips praktis.

Animasi pemuatan wizard

Melihat animasi pemuatan Wizard di CodePen

Animasi pemuatan ini dibuat sepenuhnya dengan CSS. Gambar beserta semua animasi telah dibuat dalam CSS dan HTML, tanpa gambar atau JavaScript. Untuk memahami cara pembuatannya dan seberapa baik performanya, Anda dapat menggunakan Chrome DevTools.

Memeriksa animasi dengan Chrome DevTools

Saat animasi berjalan, buka tab Performa di Chrome DevTools dan rekam animasi selama beberapa detik. Anda akan melihat di Ringkasan bahwa browser tidak melakukan operasi Tata Letak atau Gambar saat menjalankan animasi ini.

Ringkasan di DevTools
Ringkasan setelah membuat profil animasi wizard.

Untuk mengetahui cara animasi ini dicapai tanpa menyebabkan tata letak dan penggambaran, periksa salah satu elemen bergerak di Chrome DevTools. Anda dapat menggunakan Panel Animasi untuk menemukan berbagai elemen animasi. Mengklik elemen apa pun akan menandainya di DOM.

Panel Animasi yang menampilkan berbagai bagian animasi.
Menampilkan dan memilih item di Panel Animasi Chrome DevTools.

Misalnya, pilih segitiga, dan perhatikan bagaimana kotak elemen berubah selama perjalanannya ke udara, saat berputar, lalu kembali ke posisi awal.

Video yang menunjukkan cara melacak jalur segitiga di Chrome DevTools.

Dengan elemen yang masih dipilih, lihat Panel Gaya. Di sana, Anda dapat melihat CSS yang menggambar bentuk segitiga, dan animasi yang digunakan.

Cara kerjanya

Segitiga dibuat menggunakan elemen pseudo ::after untuk menambahkan konten yang dihasilkan, menggunakan batas untuk membuat bentuk.

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

Animasi ditambahkan dengan baris CSS berikut,

animation: path_triangle 10s ease-in-out infinite;

Tetap di Chrome DevTools, Anda dapat menemukan keyframe dengan men-scroll Panel Gaya ke bawah. Di sana, Anda akan menemukan bahwa animasi dibuat menggunakan transform untuk mengubah posisi elemen dan memutarnya. Properti transform adalah salah satu properti yang dijelaskan dalam Panduan Animasi, yang tidak menyebabkan browser melakukan operasi tata letak atau gambar (yang merupakan penyebab utama animasi lambat).

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

Setiap bagian bergerak yang berbeda dari animasi ini menggunakan teknik yang serupa. Hasilnya adalah animasi kompleks yang berjalan lancar.

Lingkaran Berdenyut

Lihat Lingkaran Berkedip di CodePen

Jenis animasi ini terkadang digunakan untuk menarik perhatian pada sesuatu di halaman. Untuk memahami animasi, Anda dapat menggunakan Firefox DevTools.

Memeriksa animasi dengan Firefox DevTools

Saat animasi berjalan, buka tab Performa di Firefox DevTools dan rekam animasi selama beberapa detik. Hentikan perekaman, di waterfall, Anda akan melihat bahwa tidak ada entri untuk Recalculate Style. Sekarang Anda tahu bahwa animasi ini tidak menyebabkan penghitungan ulang gaya, sehingga operasi tata letak dan gambar.

detail animasi di Waterfall Firefox
Waterfall Firefox DevTools.

Tetap di Firefox DevTools, periksa lingkaran untuk melihat cara kerja animasi ini. <div> dengan class pulsating-circle menandai posisi lingkaran, tetapi tidak menggambar lingkaran itu sendiri.

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

Lingkaran dan animasi yang terlihat dicapai menggunakan pseudo-elemen ::before dan ::after.

Elemen ::before membuat cincin buram yang meluas di luar lingkaran putih, menggunakan animasi yang disebut pulse-ring, yang menganimasikan transform: scale, dan opacity.

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

Cara lain untuk melihat properti mana yang sedang dianimasikan adalah dengan memilih panel Animasi di Firefox DevTools. Kemudian, Anda akan melihat visualisasi animasi yang digunakan, dan properti yang sedang dianimasikan.

Dengan memilih elemen semu ::before, kita dapat melihat properti mana yang dianimasikan.

Lingkaran putih itu sendiri dibuat dan dianimasikan menggunakan elemen pseudo ::after. Animasi pulse-dot menggunakan transform: scale untuk memperbesar dan memperkecil titik selama animasi.

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

Animasi seperti ini dapat digunakan di berbagai tempat dalam aplikasi Anda. Penting untuk memastikan bahwa sentuhan kecil ini tidak memengaruhi performa aplikasi secara keseluruhan.

CSS 3D Sphere murni

Lihat Pure CSS 3D Sphere di CodePen

Animasi ini tampak sangat rumit, tetapi menggunakan teknik yang telah kita lihat di contoh sebelumnya. Kompleksitasnya berasal dari menganimasikan sejumlah besar elemen.

Buka Chrome DevTools dan pilih salah satu elemen dengan class plane. Bola dunia terdiri dari sekumpulan bidang dan jari-jari yang berputar.

Pesawat tampak berputar.

Bidang dan jari-jari ini berada di dalam wrapper <div>, dan elemen inilah yang berputar menggunakan transform: rotate3d.

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

Titik dapat ditemukan bertingkat di dalam elemen plane dan spoke, titik tersebut menggunakan animasi yang menggunakan transformasi untuk menskalakan dan menerjemahkannya. Tindakan ini akan menciptakan efek denyut.

Titik berputar dengan bola dan berdenyut.
.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

Pekerjaan yang terlibat dalam pembuatan animasi ini adalah untuk mendapatkan pengaturan waktu yang tepat, untuk membuat efek putaran dan denyut. Animasi itu sendiri cukup sederhana, dan menggunakan metode yang berperforma sangat baik.

Anda dapat melihat bagaimana performa animasi ini dengan membuka Chrome DevTools dan merekam Performa saat sedang berjalan. Setelah pemuatan awal, animasi tidak memicu Tata Letak atau Gambar, dan berjalan lancar.

Kesimpulan

Dari contoh ini, Anda dapat melihat bagaimana menganimasikan beberapa properti menggunakan metode berperforma tinggi dapat membuat beberapa animasi yang sangat keren. Secara default menggunakan metode berperforma tinggi yang dijelaskan dalam Panduan animasi, Anda dapat menggunakan waktu untuk membuat efek yang diinginkan, dengan lebih sedikit masalah terkait memperlambat halaman.