Dalam postingan ini, cari tahu bagaimana beberapa animasi populer yang ditemukan di CodePen telah dibuat. Semua animasi ini menggunakan teknik performa yang dibahas dalam artikel lain dalam bagian ini.
Lihat Mengapa beberapa animasi lambat? untuk mempelajari teori di balik rekomendasi ini, dan Panduan Animasi untuk mendapatkan tips praktis.
Wizard memuat animasi
Lihat Wizard yang memuat animasi di CodePen
Animasi pemuatan ini dibuat sepenuhnya dengan CSS. Gambar beserta semua animasinya telah dibuat dalam CSS dan HTML, tanpa gambar atau JavaScript. Untuk memahami cara pembuatannya dan seberapa baik performanya, Anda bisa menggunakan Chrome DevTools.
Memeriksa animasi dengan Chrome DevTools
Dengan animasi berjalan, buka tab Performance di Chrome DevTools dan rekam animasi selama beberapa detik. Anda akan melihat di Summary bahwa browser tidak melakukan operasi Layout atau Paint apa pun saat menjalankan animasi ini.
Untuk mengetahui cara animasi ini dihasilkan tanpa menyebabkan tata letak dan paint, periksa semua elemen yang bergerak di Chrome DevTools. Anda dapat menggunakan Panel Animations untuk menemukan berbagai elemen animasi. mengklik elemen mana pun akan menandainya di DOM.
Misalnya, pilih segitiga, dan lihat bagaimana kotak elemen berubah selama perjalanannya ke udara, saat berputar, lalu kembali ke posisi awal.
Dengan elemen yang masih dipilih, lihat Panel Styles. Di sana, Anda dapat melihat CSS yang menggambar bentuk segitiga, dan animasi yang digunakan.
Cara kerjanya
Segitiga ini dibuat dengan 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 berada di Chrome DevTools, Anda dapat menemukan keyframe dengan men-scroll ke bawah Panel Style.
Di sana, Anda akan menemukan bahwa animasi dibuat dengan 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 menggambar (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 dari animasi ini menggunakan teknik yang sama. Hasilnya adalah animasi kompleks yang berjalan lancar.
Lingkaran Berdenyut
Lihat Lingkaran Berpendar di CodePen
Jenis animasi ini terkadang digunakan untuk menarik perhatian ke sesuatu di suatu halaman. Untuk memahami animasi, Anda dapat menggunakan Firefox DevTools.
Memeriksa animasi dengan Firefox DevTools
Dengan animasi berjalan, buka tab Performance di Firefox DevTools dan rekam animasi selama beberapa detik. Hentikan perekaman, di waterfall Anda akan melihat bahwa tidak ada entri untuk ReCalculate Style. Anda sekarang mengetahui bahwa animasi ini tidak menyebabkan penghitungan ulang gaya, serta operasi tata letak dan paint.
Tetap di Firefox DevTools akan memeriksa 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 dibuat menggunakan elemen pseudo ::before dan ::after.
Elemen ::before membuat cincin buram yang meluas ke 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 dianimasikan adalah dengan memilih panel Animations di Firefox DevTools. Anda kemudian 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 membesar dan mengecilkan 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. Pastikan bahwa sentuhan kecil ini tidak memengaruhi performa aplikasi secara keseluruhan.
Bola 3D CSS Murni
Lihat Pure CSS 3D Sphere di CodePen
Animasi ini tampaknya sangat rumit, namun menggunakan teknik yang telah kita lihat di contoh sebelumnya. Kompleksitas berasal dari menganimasikan sejumlah besar elemen.
Buka Chrome DevTools dan pilih salah satu elemen dengan class plane.
Bola dunia terdiri dari satu set bidang dan jari-jari yang berputar.
Bidang dan jari-jari ini berada di dalam <div> wrapper,
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-titik tersebut dapat ditemukan bertingkat di dalam elemen plane dan spoke,
dan menggunakan animasi yang menggunakan transformasi untuk menskalakan dan menerjemahkannya.
Ini menciptakan efek berdenyut-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);
}
}
Upaya yang diperlukan dalam membuat animasi ini adalah mendapatkan pengaturan waktu yang tepat, untuk menciptakan efek berputar 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 Layout atau Paint, dan berjalan lancar.
Kesimpulan
Dari contoh-contoh ini, Anda dapat melihat bagaimana menganimasikan beberapa properti menggunakan metode berperforma tinggi dapat membuat beberapa animasi yang sangat keren. Dengan menyetel default ke metode berperforma tinggi yang dijelaskan dalam Panduan animasi, Anda dapat meluangkan waktu untuk membuat efek yang diinginkan, dengan lebih sedikit kekhawatiran tentang membuat halaman menjadi lambat.