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.
Wizard memuat animasi
Melihat animasi pemuatan Wizard di CodePen
Animasi pemuatan ini dibuat sepenuhnya dengan CSS. Gambar plus semua animasinya 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 Performance di Chrome DevTools dan rekam beberapa detik animasi. Anda akan melihat di Ringkasan bahwa browser tidak melakukan operasi Tata Letak atau Gambar saat menjalankan animasi ini.
Untuk mengetahui cara animasi ini dicapai tanpa menyebabkan tata letak dan gambar, periksa elemen yang bergerak di Chrome DevTools. Anda dapat menggunakan Panel Animasi untuk menemukan berbagai elemen animasi. Mengklik elemen apa pun akan menandainya di DOM.
Misalnya, pilih segitiga, dan perhatikan bagaimana kotak elemen berubah selama perjalanannya ke udara, saat berputar, lalu kembali ke posisi awal.
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);
}
}
Masing-masing bagian bergerak yang berbeda pada animasi ini menggunakan teknik yang serupa. Hasilnya adalah animasi kompleks yang berjalan dengan lancar.
Lingkaran Berkedip
Lihat Lingkaran Berdenyut di CodePen
Jenis animasi ini terkadang digunakan untuk menarik perhatian ke 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.
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.
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.
Bola 3D CSS Murni
Melihat Bola 3D CSS Murni 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 terdiri dari serangkaian bidang dan jari-jari yang 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.
.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 diperlukan dalam pembuatan animasi ini adalah mendapatkan pengaturan waktu yang tepat, untuk menciptakan efek putar dan kedipan. Animasinya sendiri cukup mudah, dan menggunakan metode yang berperforma sangat baik.
Anda dapat melihat performa animasi ini dengan membuka Chrome DevTools dan merekam Performa saat animasi 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.