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 suatu elemen berubah dari satu state ke state lainnya. Contohnya adalah elemen berputar, bergerak, miring, dan menskala. Tanpa transisi, elemen yang ditransformasikan akan berubah secara tiba-tiba dari satu keadaan ke keadaan lainnya. Untuk mencegah hal ini, transisi dapat ditambahkan sehingga Anda dapat mengontrol perubahan, membuatnya terlihat lebih halus.

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 asli berwarna hijau lebih gelap dan hasil transformasinya sedikit lebih transparan.

Menerjemahkan

Metode translate() memindahkan elemen dari posisinya saat ini ke yang 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 adalah 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);

miringY

Ini adalah ide yang sama, tetapi pada sumbu y. Metode skewY() elemen di sepanjang sumbu y dengan sudut yang ditentukan. Persegi panjang ini miring 30 derajat 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, ini dapat dilakukan di satu tempat. Metode skew() elemen di sepanjang sumbu x dan y menggunakan sudut yang ditentukan. Contoh berikut memiringkan elemen persegi panjang 30 derajat di sepanjang sumbu x dan 20 derajat di 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 menuliskan semuanya 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())

Sebagai permulaan, dibutuhkan beberapa penelitian untuk menghasilkan nilai-nilai dalam matriks. Berikut adalah panduan bermanfaat 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 mereka sering digunakan dengan transisi. Ini akan lebih masuk akal dalam contoh desain berikut.

Sebaiknya diingat bahwa nilai dapat disesuaikan untuk membuat transisi antara dua status elemen sesuai keinginan Anda. 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 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 CSS transition adalah properti singkatan untuk transition-property transition-duration transition-timing-function transisi , dan transition-delay .

Detail transisi

Properti transition-property menentukan properti CSS tempat transisi akan diterapkan, karena Anda dapat menerapkan transisi ke properti individual. Contoh penerapan transisi ke properti individu 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 agar perubahan dalam properti berlangsung selama waktu tertentu daripada segera. Anda akan melihat detik dan milidetik sebagai nilai yang memungkinkan.

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 akan dimulai. Initial akan mengatur properti ke nilai defaultnya. 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;

Berikut adalah penyiapan singkatan 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 yang menyenangkan, tapi itu menggoda untuk terlalu bernyawa. Gerakan yang Anda buat harus menyampaikan makna dan meningkatkan pengalaman pengguna, bukan mengalihkannya. Dengan itu, saatnya untuk berkreasi!

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

Memindahkan gambar dengan properti transformasi CSS

Sebelum kita masuk ke transformasi dan transisi yang rumit, mari kita bicara tentang koordinat pada kisi sumbu. (Perhatian: Ini mungkin membawa kembali kenangan kertas grafik dari kursus matematika.) Koordinat digunakan untuk memindahkan gambar.

koordinat x dan y

Hal-hal akan terlihat sedikit berbeda dari apa 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.

Animasi satu: Transformasi dasar dengan gerakan horizontal

Kami secara singkat menyentuh dasar translate() 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 muncul untuk mengudara sesekali, jadi kami 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 pada hover .underwater . Dengan membuat gaya untuk gerakan di .underwater:hover .move-right , tindakan akan terjadi saat mengarahkan kursor.

Berikut 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 kami akan jatuh di kotak kanan atas. Saat melayang, kapal selam bergerak ke koordinat baru karena transformasi.

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

Animasi dasar dua: Gerakan horizontal dengan bingkai utama dan animasi

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

Dasar-dasar bingkai utama

Di dalam @keyframes adalah tempat Anda menentukan gaya dan tahapan untuk animasi. Berikut adalah 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 diatur pada 0%, dan pada 100%, posisi akan turun sebesar 30px.

Dasar-dasar animasi

Untuk menggunakan animasi CSS3, Anda menentukan bingkai utama untuk animasi.

Cara menggunakan Kueri Fitur CSS

Dunia desain web selalu berubah dan sangat menarik untuk mengikuti tren desain baru di CSS. Jika Anda adalah pengguna CSS awal, Anda mungkin sudah tidak sabar untuk menggunakan hal-hal seperti CSS Grid...

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

Setiap kali Anda melakukan ini, pastikan untuk memberi animasi nama deskriptif. Dalam hal ini, kami menggunakan fadeOut . Kelas apa pun yang menyertakan fadeOut akan diterapkan. Dalam tahapan animasi, "dari" diatur ke 0% dan "ke" diatur ke 100%. Contoh ini cukup sederhana hanya dengan dua tahap, tetapi tentu saja 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 tampilan animasinya; subproperti menentukan aturan khusus untuk animasi. Waktu, durasi, dan detail penting lainnya tentang bagaimana urutan animasi harus berkembang semuanya termasuk dalam subproperti.

Berikut adalah beberapa contoh subproperti animasi:

• Animation-name: Nama dari @keyframesat-rule , yang menjelaskan keyframe animasi. Nama fadeOut pada contoh sebelumnya adalah contoh dari animation-name .
• Durasi animasi: Durasi waktu yang dibutuhkan animasi untuk menyelesaikan satu siklus penuh.
• Fungsi pengaturan waktu animasi: Pengaturan waktu animasi, khususnya bagaimana transisi animasi melalui keyframe. Fungsi ini memiliki kemampuan untuk membentuk kurva percepatan. Contohnya adalah linear , ease , ease-in , ease-out , ease-in-out , atau cubic-bezier .
• Penundaan animasi: 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.
• Animation-direction: Ini menentukan apakah animasi harus bergantian arah pada setiap run melalui urutan atau reset ke titik awal dan ulangi sendiri.
• Animation-fill-mode: Nilai yang diterapkan oleh animasi baik sebelum dan sesudah dijalankan.
• Animation-play-state: Dengan opsi ini, Anda dapat menjeda dan melanjutkan urutan animasi. Contohnya tidak 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 bentuk singkat:

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 utama

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 utama membantu memuluskan animasi, tetapi kita dapat menambahkan sedikit lebih banyak interaktivitas dengan lebih banyak bingkai utama dan penundaan teks pada div yang berisi semua teks. Ini adalah efek yang menyenangkan untuk membuat kapal selam memantul dari teks, jadi memiliki penundaan yang sejalan dengan pergerakan kapal selam memungkinkan untuk itu.

HTML akan menerapkan kelas 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 kubik-bezier dalam animasi CSS3

Saatnya merayakan kemajuan animasi kami dengan membuat bilah kemajuan!

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

Berikut 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 membuatnya menjadi hidup:

@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;
}

Di set bingkai utama pertama, lebarnya berubah dari 0 hingga 100% dengan durasi dua detik. Bingkai utama dalam progressMotion mengendalikan 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 dimulai sedikit lebih lambat dan kemudian mengambil langkahnya?

Sangat membantu untuk membayangkan pembungkus bezier sebagai persegi. Kiri bawah dan kanan atas adalah tempat di mana poin-poin penting, 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 dari titik kontrol p1
• x2 adalah koordinat x dari titik kontrol p2
• y2 adalah koordinat y dari titik kontrol p2

Berikut adalah beberapa contoh nilai:

x1 = .7
y1 = 0,16
x2 = .2
y2 = .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 dengan mudah dibuat. Semoga melihat contoh animasi CSS3 dasar ini telah membantu Anda melihat kemungkinan lain yang ada.

Selanjutnya: Plugin WordPress yang akan Anda sukai

Unduh ebook ini untuk daftar plugin yang paling direkomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.