Keadaan dari Animasi CSS

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

CSS telah menjadi dewasa dalam banyak cara sepanjang tahun, bukan hanya dalam hal animasi CSS. Tiap hari yang berlalu membawa lebih banyak dan lebih banyak lagi pengembang yang membuat antarmuka yang hidup dan bernafas. Di artikel ini kita akan melihat keadaan dari animasi CSS, cara dia telah berkembang, kemampuannya hari ini dan membahas beberapa sumberdaya dan alat yang tersedia, mari kita mulai!

Perkembangan

Penggunaan animasi di web meningkat pesat karena penambahan transition dan @keyframes ke CSS. Ada satu waktu di mana animasi dan CSS tidak saling mengenal, namun sekarang sudah tidak lagi. Artikel, panduan, kursus premium dan bahkan motion guidelines menjadi jauh lebih mudah diakses sekarang ketimbang dulu. Mengombinasikan @keyframes dengan animation secara tepat, bersama dengan transition akhirnya telah memberikan pengembang kesempatan untuk membuat motion secara tepat dan meminjamkan antarmuka sebuah kepribribadian dan hidup yang pernah tak dipertimbangkan.

Part of Googles Material Motion Guidelines — Dari Google's Material Motion Guidelines

Tidak pernah ada waktu yang lebih menarik untuk animasi CSS dan desain interaktif ketimbang sekarang!

Keyframe & Properti Animasi

Impelementasi dari properti animation sekarang mengizinkan pengembang mengontrpl durasi, timing, anhka iterasi, arah, fill mode, dan play state. Porsi timing-nys juga mengizinkan fungsi steps(). Fungsi timing spesial ini memecah animasi atau segemn (seperti sebuah strip film), ketimbang sebagai satu transisi berlanjut dari satu keadaan ke keadaan lain. Keyframes mengizinkan pengembang motion untuk menyatakan posisi menggunakan from, to dan bahkan persentase untuk menganimasikan antara nilai properti yang dinyatakan. Ini permulaan yang bagus, namun kita akan mendiskusokan kekurangannya nanti.

Properti Transition

Lalu, di sana ada properti transition yang berjaya; sebuah properti yang sama mewahnya dengan animation dan mengizinkan kita untuk mengontrol kecepatan animasi saat properti berubah. Proses transisi antara dua keadaan biasanya disebut sebagai implicit transition; sebuah istilah yang menyatakan keadaan di antara keadaan awal dan aknir, didefinisikan secara implisit oleh browser. Transisi mengizinkan kostumisasi dari properti, timing, durasi dan jeda.

Video perkenalan di atas diambil dari Menyiapkan dan Menjalankan Transisi CSS oleh Craig Campbell.

Apa yang Hilang?

Animasi CSS bisa jadi bertenaga, namun masih kurang sebuah aspek penting yang animator iginkan; kontrol timeline-esque. Yang saya maksud dengannya adalah urutan yang dapat dipengsruhi dan dimanipulasi berdasarkan timing.

@keyframes move-object {
    from { starting position property and values }
    at 2s { do this }
    wait-until 4s { this happens }
    to { stop position property and values }
}

Sintaks di atas tidak ada, tapi melukis sebuah gambar dalam cara yang lebih detil dari apa yang ahli animasi cari di web. GreenSock sebagai contohnya, dikenal karena penggunaan sequencing, namun sayangnya hanya terjadi di JavaScript. Bukankah akan lebih bagus jika memilikinha dk CSS juga? Saya rasa begitu.

Video di atas diambil dari Platform Animasi GreenSock: Langkah Pertama oleh Craig Campbell.

Tentu saja ada kemampuan mengatur event animation dan transition melalui JavaScript untuk kontrol granular lebih jauh dsri sebuah sequence. Dengan JavaScript, pengembang bisa mendeteksi awal dadi setiap pengulangan animasi baru, ketika anima terjadi, ketika animasi berhenti dan hal yang sama untuk event transisi.

Perkakas dan Inspekso Browser

Ada yang sangat menarik di perkakas pengembang browser untuk menginspeksi dan mengatur animasi CSS. Kebanyakan browser (Firefox, Chrome) mengizinkan inspeksi animasi CSS berkaitan dengan Safari dan Edge. Dari apa yang dikatakan oleh sumber yang bekerja untuk Microsoft, inspeksi animasi adalah sesuatu yang tim Microsoft ingin kerjakan. Mari harapkan yang sama pada Safari.

Berkaitan dengan browser yang mendukung inspeksi animasi, kita memiliki kemampuan berikut...

Inspeksi linimasa hang bisa digosok.
Menampilkan animasi yang diterapkan ke elemen semu ::before dan ::after.
Mengatur properti keyframes dengsn cepat.
Melaporkan nama keyframes.
Menampilkan properti yang dianimasikan.
Mempermudah pengambilan dan editor curver bézier.
Mode warna untuk mengetahui apakah event adalah transisi, keyframe, atau animasi web.
Mengatur dan mengubah playback rate.

Sementara pengembang memiliki cukup banyak untuk dipilih berdasarkan dsftar di atas, mereka masih membutuhkan lebih banyak perkakas untuk animasi terkait interaksi pengguna. Ini juga dikenal sebagai property interpolation, masuknya sebuah nilai penengah ke sebuah seri dengan menghitungnya dari nilai yang diketahui di sekitar; sangat mirip dengan saat kamu berganti ke nilai transisi baru. Animasi reaktif atau dinamis ini bisa dimulai kapanpum, tidak pasti, dan memiliki variabel durasi tergantung dari aktivitas pengguna. Sesuatu yang sekali lagi tidak bisa diinspeksi oleh perkakas pengembang browser manapun saat ini.

Masa Depan

Masa depan animasi CSS terlihay cerah, walaupun dengan spesifikasi terkait yang lamban berubah. Module css motion-path, contain, will-change dan prefers-reduced-motion media querg (belum jadi standar dan hanya WebKit) adalah fitjr yang akan datang untuk animator CSS.

CSS Motion Path

Motion path mengizinkan pengembang untuk menganimasikan objek grsfik apapun bersama sebuah jalur terspesifikasi. Kamu bisa mendefinisikan sebuah jalur dengan cara hang sangay mirip dengan SVG 1.1.

1	.my-element {
2	motion-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');
3	motion-offset: 0;
4	motion-rotation: reverse;
5	}

motion-path akan mendefinisikan jalur yang akan dilewati elemen. Properti motion-offset adalah posisi peletakkan elemen, di suatu tempat di jalur. Properti motion-rotation adalah arah dari "muka" elemen saat dia bergerak di jalur.

Cek koleksi demo berikut di CodePen oleh Dan Wilson yang menyedkakan contoh nyata yang menampilkan kemamouan motion-path.

Demo CSS Motion Path oleh Dan Wilson.
CSS Motion Path oleh Dan Wilson

Will Change

Properti will-change menyediakan cara untuk memberi petunjuk ke browser pada suatu perubahan yang diharapkan untuk sebuah elemen. Ini membiarkan browser mempersiapkam optimasi yang tepat sebelum elemennya benar-benar berubah.

1	.my-element {
2	will-change: transform;
3	}

Optimasi macam ini bisa meningkaykan waktu muat dan tata letak sebuah halaman dengan mengerjakan pekerjaan berat sebelum dia benar-benar terjadi. Dengan begitu, disarankan agar pengembang tidak menggunakan terlalu banyak elemen will-change karena bisa mengonsumsi sumberdaya dan bisa memperlambat halaman.

Prefers Reduced Motion

Tambahan non-spec ke WebKit membuat gaya yang menghindari area motion untuk pengguna yang ingin mengurangi motion melalui System Preferences.

@media (prefers-reduced-motion) {
  .my-element {
     animation: none;
  }
}

Ini lebih seperti situasi aksesibilitas melawan penciptaan motion sebenarnya. Sesuatu yang menarik untuk diperhatikan di waltu senggangmu.

Contain

Modul CSS ini mengindikasikan bahwa subtree elemen tidak bergantung pada sisa dari halaman, ini mengaktifkan optimasi besar oleh user agent ketika digunakan dengan benar. Yang paling menarik bagi animator CSS adalah nilai paint yang bisa dilewatkan.

1	.element-with-motion {
2	contain: paint;
3	}

Jika elemen di luar layar di luar layar atau dikaburkan, browser bisa secara langsunb melewati pelukosan kontennya karena mereka dojamin berada di luar layar atau dikaburkan. Ini akan menyediakan nilai dengan memastikan rendering pipeline yang lebih cepat saat pelukisan pertama. Ini masih sebuah konsep umtuk dikerjakan di W3C.

Sumberdaya

Ada banyak cara untuk terus mengikuti animasi CSS. Verikut ada beberapa alat dan sumberdaya termasuk spesifikasi untuk kamu baca di waktu luang. Jika kamu mengetahui sumberdaya keren dan membangu lainnha. Mari beri tahu kami di kolom komentar dan kita akan menambahkannya ke daftar. Selamat beranimasi!

Spesifikasi W3C

Belajar

Pengantar Pemula ke Animasi CSS oleh Catalin Miron
9 Kursus Populer tentang Animasi CSS di Envato Tuts+
CSS Animation Rocks
Cara membaca kurva cubic-bezier oleh Val Head
Pengantar ke Animasi Keyframes CSS di Smashing Magazine
Esensi Animasi Web: Animasi dan Transisi CSS oleh Rachel Nabors
Jank Free
Pengantar ke Transformasi 3D CSS oleh David DeSandro
Menggunakan CSS, bisakah saya menganimasikan <CSS Property> ?
Animasi dan Transisi CSS. Module Motion Path CSS oleh Ruslan Homyak
Panduan Saku Animasi CSS oleh Val Head

Alat

Stylie oleh Jeremy Kahn
Animate.css oleh Daniel Eden
Komponen Material untuk situs
Easings oleh Andgres Sitnik
Animista oleh Ana Travas
WAIT! Animate oleh Will Stone
cssanimate.com Generator Animasi Keyframes CSS3
cubic-bezier.com oleh Lea Verou
cssreference.io panduan visual ke CSS gratis, oleh Jeremy Thomas.
Motion UI dari ZURB
magic animasi CSS3 dengan efek spesial oleh Christian Pucci
Hover.css oleh Ian Lunn
CSSYNTH oleh Bennett Feely