Cara Menggunakan Transisi dan Transformasi CSS3 untuk Membuat Animasi

Animasi yang menarik dapat dibuat dengan CSS3 dengan menggunakan transformasi dan transisi. Transform digunakan untuk membuat elemen berubah dari satu keadaan ke keadaan lainnya. Contohnya adalah elemen yang berputar, bergerak, miring, dan menskala. Tanpa transisi, elemen yang ditransformasikan akan berubah tiba-tiba dari satu keadaan ke keadaan lain. Untuk mencegah hal ini, sebuah transisi dapat ditambahkan sehingga Anda dapat mengontrol perubahan tersebut, sehingga terlihat lebih mulus.

Cara Menggunakan Transformasi CSS3

Ada beberapa jenis transformasi yang umum digunakan. Kami akan fokus pada contoh 2D untuk tutorial ini, tetapi perlu diketahui bahwa hal-hal keren juga dapat dilakukan dengan transformasi 3D. (Setelah Anda menguasai 2D, 3D akan jauh lebih mudah!)

Dalam contoh berikut, persegi panjang aslinya berwarna hijau tua dan transformasinya sedikit lebih transparan.

Menerjemahkan

Metode translate() memindahkan elemen dari posisinya saat ini ke posisi baru.
Dengan kode ini, persegi panjang yang disesuaikan dipindahkan 40 piksel ke kanan, dan 100 piksel ke bawah dari posisi saat ini.

 -ms-transform: translate(40px, 100px); /* IE 9 */ -webkit-transform: translate(40px, 100px); /* Safari */ transform: translate(40px, 100px);

Memutar

Metode rotate() memutar elemen searah jarum jam atau berlawanan arah jarum jam dengan nilai derajat yang ditentukan. Kode ini memutar persegi panjang searah jarum jam sebesar 40 derajat.

 -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari */ transform: rotate(40deg);

Skala

Metode scale() menambah atau mengurangi ukuran elemen (sesuai dengan parameter yang diberikan untuk lebar dan tinggi). Dalam contoh ini, persegi panjang yang disesuaikan dua kali lebih besar dari lebar aslinya dan tiga kali lebih besar dari tinggi aslinya.

 -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3);

SkewX

Dengan skewX() , hanya sumbu x yang akan terpengaruh. Persegi panjang ini miring 30 derajat sepanjang sumbu x:

 -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg);

Miring

Ini adalah ide yang sama, tetapi pada sumbu y. Metode skewY() memiringkan elemen sepanjang sumbu y dengan sudut yang ditentukan. Persegi panjang ini miring 30 derajat di sepanjang sumbu y.

 -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); }

Condong

Jika Anda ingin memiringkan sumbu x dan y, hal ini dapat dilakukan di satu tempat. Metode skew() memiringkan elemen sepanjang sumbu x dan y menggunakan sudut yang ditentukan. Contoh berikut memiringkan elemen persegi panjang 30 derajat sepanjang sumbu x dan 20 derajat sepanjang sumbu x.

 -ms-transform: skew(30deg, 20deg); /* IE 9 */ -webkit-transform: skew(30deg, 20deg); /* Safari */ transform: skew(30deg, 20deg);

Matriks

Di sinilah segalanya menjadi menarik, tetapi juga lebih efisien dalam situasi yang tepat. Jika Anda melakukan banyak transformasi dan tidak ingin menuliskannya satu per satu, transformasi 2D ini dapat digabungkan dengan metode matrix() .

Berikut garis besar dasar yang harus diikuti:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Sekadar informasi, dibutuhkan beberapa penelitian untuk menghasilkan nilai dalam matriks. Berikut adalah panduan yang berguna untuk memulai.

Untuk membuat contoh ini, berikut adalah nilai matriks:

 -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(2, -0.3, 0, 1, 0, 0);

Cara Menggunakan Transisi CSS3

Sekarang transformasi telah dibahas, penting untuk dicatat bahwa transformasi sering digunakan dengan transisi. Ini akan lebih masuk akal dalam contoh desain berikut.

Perlu diingat bahwa nilai dapat disesuaikan untuk melakukan transisi antara dua status elemen seperti yang Anda inginkan. Anggap saja sebagai cara untuk mengontrol kecepatan animasi saat mengubah properti CSS. Salah satu contoh yang mungkin Anda temui adalah jika Anda mengarahkan kursor ke sebuah tombol. Adalah umum untuk melihat "penggelapan lambat" daripada hanya warna gelap instan yang cepat saat Anda mengarahkan kursor ke atasnya. "Penggelapan lambat" ini dibuat dengan transisi.

Jika Anda menentukan banyak nilai, steno akan berguna. Properti transition CSS adalah properti singkatan untuk transition-property , transition-duration , transition-timing-function , dan transition-delay .

Detail Transisi

transition-property menentukan properti CSS tempat transisi akan diterapkan, karena Anda dapat menerapkan transisi ke properti individual. Contoh penerapan transisi ke properti individual akan berada di latar belakang atau transformasi. Jika Anda ingin menargetkan semua properti di situs, properti transform dapat disetel ke all .

transition-duration sangat membantu untuk membuat perubahan dalam properti berlangsung selama waktu tertentu daripada segera. Anda akan melihat detik dan milidetik sebagai kemungkinan nilai.

 transition-duration: 7s; transition-duration: 120ms; transition-duration: 2s, 3s; transition-duration: 10s, 30s, 230ms;

Properti CSS transition-timing-function memungkinkan Anda membuat kurva akselerasi, sehingga kecepatan transisi dapat bervariasi selama durasinya. Ada banyak pilihan untuk bereksperimen.

 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay cukup jelas. Nilai yang ditentukan menetapkan jumlah detik atau milidetik untuk menunggu sebelum efek transisi dimulai. Initial akan mengatur properti ke nilai standarnya. Jika inherit ditentukan, ini berarti mewarisi properti dari elemen induknya.

 Here are all the properties: transition-property: background; //all transition-duration: 1s; transition-timing-function: linear; //other options are ease transition-delay: 0.5s;

Inilah penyiapan steno dasar untuk transisi:

 div { transition: [property] [duration] [timing-function] [delay]; }

Urutan singkatan lengkap:

 div { transition: background 1s linear 0.5s; }

Perencanaan Animasi

Sebelum Anda membuat animasi yang benar-benar mendetail, ada baiknya mundur selangkah sebelum membuat sesuatu yang benar-benar gila (terutama jika itu akan dipublikasikan di web). Tidak ada yang salah dengan menambahkan beberapa bakat menyenangkan, tetapi tergoda untuk menganimasikan secara berlebihan. Gerakan yang Anda buat harus menyampaikan makna dan meningkatkan pengalaman pengguna, bukan mengalihkannya. Dengan itu, saatnya untuk berkreasi!

Saya ingin menyebutkan bahwa ada gif animasi dalam tutorial ini untuk menampilkan animasi. GIF diulang, yang biasanya tidak dilakukan untuk desain. Tujuan mengulanginya adalah untuk tujuan demonstrasi saja.

Memindahkan Gambar dengan CSS Transform Property

Sebelum kita memasuki transformasi dan transisi yang rumit, mari kita bicara tentang koordinat pada kisi sumbu. (Perhatian: Ini dapat mengingatkan kembali kertas grafik dari tugas kursus matematika.) Koordinat digunakan untuk memindahkan gambar.

Koordinat X dan Y

Segalanya akan terlihat sedikit berbeda dari yang Anda harapkan. Nilai -y berada di atas sumbu x. HTML dan CSS menggunakan apa yang disebut "sistem koordinat Cartesian terbalik", karena halaman web dimulai dari kiri atas dan dibaca ke bawah.

Animation One: Transformasi Dasar dengan Gerakan Horizontal

Kami secara singkat membahas tentang terjemahan () dan bagaimana itu dapat memindahkan elemen. Ketika dipraktikkan, itu benar-benar dapat mengapungkan perahu Anda, secara harfiah. Seperti yang kita pelajari di atas, metode translate() memindahkan elemen dari posisinya saat ini (sesuai dengan parameter yang diberikan untuk sumbu x dan sumbu y).

Proyek pertama akan memindahkan grafik kapal selam. Kapal selam perlu mengudara sesekali, jadi kita akan menatanya dengan hati-hati dengan translate() .

Untuk memindahkannya dari posisi awalnya menggunakan transform: translate(x,y) , dua nilai baru harus ditentukan. Untuk membuat kapal selam bergerak ke kanan dan ke atas, nilai x harus positif dan nilai y harus negatif. Jika nilai y diatur ke 0, itu hanya akan bergerak ke kanan dan tidak ke atas.

Kapal selam naik ke udara dengan transform()

Dalam contoh ini kita akan memindahkan objek 200px ke kanan dan 25px ke atas. Sintaksnya adalah transform: translate(200px,-25px); dan objek akan bergerak di hover .underwater . Dengan membuat gaya untuk pergerakan di .underwater:hover .move-right , aksi akan terjadi saat melayang.

Ini adalah HTML awal:

 <div class="underwater"> <div class="object submarine move-right"> <!-- image is set as a background image on submarine --> </div> </div>

Lihat ini di Codepen.

Tidak perlu banyak CSS untuk membuat animasi dasar ini:

 .underwater { position: relative; min-height: 600px; background-color: #4fc3da; } .underwater:hover .move-right{ transform: translate( 200px ,-25px ); -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/ -ms-transform: translate( 200px ,-25px ); /** Firefox **/ } .submarine { height: 200px; background: url("little-submarine.svg") no-repeat; } .object { transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -ms-transition: all 2s ease-in-out; /** Opera **/ }

Seperti yang Anda lihat, koordinat kita akan berada di kotak kanan atas. Saat melayang, kapal selam bergerak ke atas ke koordinat baru karena transformasi.

Segalanya terlihat mulus karena transisi. transition-duration diatur ke 2sec , yang tidak terlalu cepat untuk animasi ini. transition-timing-function diatur ke ease-in-out yang memberikan awal dan akhir yang lebih lambat. Jika waktu durasi ditingkatkan menjadi sesuatu yang lebih besar, ini akan sangat jelas.

Animasi Dasar Dua: Gerakan Horizontal dengan Keyframe dan Animasi

Transform digunakan sedikit berbeda dalam contoh ini. Bingkai kunci dan properti animasi akan digunakan untuk membuat animasi berikutnya.

Dasar Bingkai Utama

Di dalam @keyframes adalah tempat Anda menentukan gaya dan tahapan untuk animasi. Inilah contoh yang akan kita gunakan, yang akan membantu memberikan efek "fade in while moving down":

 @keyframes fadeInDown { 0% { opacity: .8; transform: translate(0, 0); } 100% { opacity: 1; transform: translate(0, 30px); } }

Nilai transformasi dimasukkan ke dalam keyframe. Penempatan asli ditetapkan pada 0%, dan pada 100%, posisi akan bergerak turun sebesar 30 piksel.

Dasar Animasi

Untuk menggunakan animasi CSS3, Anda menentukan keyframe untuk animasi.

Seperti yang dirancang di atas, @keyframes menyimpan gaya apa yang akan dimiliki elemen pada waktu tertentu.

Setiap kali Anda melakukan ini, pastikan untuk memberi nama deskriptif pada animasi. Dalam hal ini, kami menggunakan fadeOut . Kelas apa pun yang menyertakan fadeOut akan diterapkan. Pada tahapan animasi, “from” diatur ke 0% dan “to” diatur ke 100%. Contoh ini cukup sederhana hanya dengan dua tahap, tetapi pasti ada lebih banyak langkah yang ditambahkan di antaranya.

Tindakan Spesifik dengan Subproperti Animasi

Properti animasi digunakan untuk memanggil @keyframes di dalam pemilih CSS. Animasi dapat dan akan sering memiliki lebih dari satu subproperti.

Keyframes menentukan seperti apa animasi itu nantinya; subproperti menentukan aturan khusus untuk animasi. Pengaturan waktu, durasi, dan detail penting lainnya tentang bagaimana urutan animasi harus berkembang semuanya termasuk dalam subproperti.

Berikut beberapa contoh subproperti animasi:

• Animation-name: Nama dari @keyframesat-rule , yang mendeskripsikan keyframe animasi. Nama fadeOut pada contoh sebelumnya adalah contoh dari animation-name .
• Animation-duration: Durasi waktu yang diperlukan animasi untuk menyelesaikan satu siklus penuh.
• Animation-timing-function: Pengaturan waktu animasi, khususnya bagaimana animasi bertransisi melalui keyframe. Fungsi ini memiliki kemampuan untuk membentuk kurva akselerasi. Contohnya adalah linear , ease , ease-in , ease-out , ease-in-out , atau cubic-bezier .
• Animation-delay: Penundaan antara waktu elemen dimuat dan awal animasi.
• Animation-iteration-count: Berapa kali animasi harus diulang. Ingin animasi berlangsung selamanya? Anda dapat menentukan infinite untuk mengulang animasi tanpa batas.
• Arah animasi: Ini menentukan apakah animasi harus mengubah arah pada setiap proses melalui urutan atau mengatur ulang ke titik awal dan mengulanginya sendiri.
• Animation-fill-mode: Nilai yang diterapkan oleh animasi sebelum dan sesudah dijalankan.
• Animation-play-state: Dengan opsi ini, Anda dapat menjeda dan melanjutkan urutan animasi. Contohnya adalah none , forwards , backwards , atau both .

 .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; }

Inilah yang akan terlihat seperti ditulis dalam steno:

 animation: 4s ease-in-out 1 paused fadeInDown;

Berikut adalah struktur HTMLnya:

 <div class="underwater"> <div class="content-wrap fadeInDown"> <div class="submarine"></div> <h2>Cute Submarine</h2> <p>Text here.</p> </div> </div>

Kelas fadeInDown membuat kapal selam dan konten bergerak naik turun.

Membuat animasi lebih halus dengan menyesuaikan bingkai kunci

Dengan beberapa keyframe lagi, kita bisa membuat animasi lebih halus.

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(5px); } 25% { opacity: .9; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: .9; transform: translateY(0); } }

Lihat ini di Codepen.

Menyesuaikan Waktu Animasi

Menambahkan lebih banyak bingkai kunci membantu memuluskan animasi, tetapi kita dapat menambahkan lebih banyak interaktivitas dengan lebih banyak bingkai kunci dan jeda teks pada div yang berisi semua teks. Ini adalah efek yang menyenangkan untuk membuat kapal selam terpental dari teks, sehingga penundaan sejalan dengan pergerakan kapal selam memungkinkan hal itu.

HTML akan menerapkan kelas yang efektif:

 <div class="underwater"> <div class="submarine move-down fadeInDown"> </div> <div class="moving-content move-down text-delay fadeInDownText"> <p>Text goes here.</p> </div> </div>

Dan inilah CSS yang diperbarui yang memungkinkan animasi interaktif:

 @keyframes fadeInDown { 0% { opacity: .8; transform: translateY(0); } 25% { opacity: 1; transform: translateY(15px); } 50% { opacity: 1; transform: translateY(30px); } 75% { opacity: 1; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownText { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 1; transform: translateY(35px); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownText { -webkit-animation-name: fadeInDownText; animation-name: fadeInDownText; } .move-down{ -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 } .text-delay { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }

Lihat ini di Codepen.

Bilah Kemajuan Cubic-bezier dalam Animasi CSS3

Saatnya merayakan progres animasi kita dengan membuat bilah progres!

Semua konsep yang telah kita bahas akan bersatu untuk menciptakan sesuatu seperti ini. Bilah progres adalah elemen UI yang sangat umum, sehingga membuat sesuatu yang fungsional seperti ini akan membantu Anda melihat bagaimana elemen web lainnya dapat dianimasikan.

Ini adalah HTML awal:

 <div class="container"> <div class="row"> <div class="masthead"> <p>CSS3 Loading Bar</p> </div> </div> <div class="fast-loader"></div> </div>

Dan CSS untuk mewujudkannya:

 @keyframes speedSetting { 0% { width: 0px; } 100% { width: 100%; } } @keyframes progressMotion { 0% { opacity: 1; } 50% {opacity: 1; } 100% { opacity: 0; } } .fast-loader { width: 0px; height: 10px; background: linear-gradient(to left, blue,rgba(255,255,255,.0)); animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; -webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite; }

Pada set keyframe pertama, lebarnya berkisar dari 0 hingga 100% dengan durasi dua detik. Keyframes in progressMotion sedang mengontrol opacity.

Kurva Bezier CSS

Fungsi cubic-bezier() dapat digunakan dengan properti transition-timing-function untuk mengontrol bagaimana transisi akan mengubah kecepatan selama durasinya. Anda akan melihat ini di animasi. Lihat bagaimana itu mulai sedikit lebih lambat dan kemudian menambah kecepatannya?

Sangat membantu untuk membayangkan pembungkus bezier sebagai persegi. Kiri bawah dan kanan atas adalah tempat-tempat dimana titik-titik kunci berada, yaitu P0 dan P3. Ini selalu diatur ke (0,0) dan (1,1), yang tidak berubah. Namun, P1 dan P2 dapat dipindahkan dengan fungsi cubic-bezier() jika Anda menentukan titik baru dengan nilai x atau y.

• x1 adalah koordinat x titik kontrol p1
• y1 adalah koordinat y titik kontrol p1
• x2 adalah koordinat x titik kontrol p2
• y2 adalah koordinat y dari titik kontrol p2

Berikut adalah beberapa contoh nilai:

x1 = 0,7
y1 = 0,16
x2 = 0,2
y2 = 0,9

Jadi contohnya mungkin terlihat seperti ini:

 cubic-bezier(.7,.16,.2,.9)

Bilah kemajuan adalah contoh yang bagus tentang bagaimana bezier dapat menyesuaikan waktu animasi. Dengan transformasi, transisi, dan banyak opsi lainnya, animasi kustom dapat dibuat dengan mudah. Semoga melihat contoh animasi CSS3 dasar ini telah membantu Anda melihat kemungkinan lain yang ada.