Cara membuat animasi dengan CSS

Kami sudah cukup terbiasa melihat animasi di situs web dan menikmati energi dan variasi yang mereka bawa ke desain web. Mereka menarik, cara yang bagus untuk menambahkan beberapa minat visual ke situs, dan umumnya membuat pengalaman lebih menarik bagi pengguna Anda.

Sementara secara tradisional dicapai dengan GIF, SVG, WebGL, dan video latar belakang, animasi juga dapat dibuat secara efisien dengan CSS. Dukungan browser untuk animasi CSS telah meningkat pesat dan menjadi cukup populer — browser yang kompatibel termasuk Firefox 5+, IE 10+, Chrome, Safari 4+, dan Opera 12+.

Hari ini saya akan memandu Anda melalui dasar-dasar membuat animasi CSS dengan demo langkah demi langkah. Tetap di sekitar setelah itu dan lihat lima contoh animasi. Anda akan dapat menggunakan semua ide ini untuk membuat animasi untuk proyek Anda sendiri!

Dasar-dasar animasi CSS

Jelas, penting untuk membahas dasar-dasar cara kerja animasi sebelum kita menyelami lima animasi CSS yang menyenangkan.
Misalnya, keyframe adalah komponen kunci untuk animasi CSS. Anda mungkin akrab dengan istilah itu jika Anda pernah bekerja dengan Adobe Flash atau memiliki pengalaman dengan pengeditan video. Dalam hal ini, istilah keyframe adalah apa yang Anda pikirkan: ini adalah cara untuk menentukan tindakan tertentu.

Anda mungkin pernah menemukan @keyframes dalam stylesheet CSS sebelumnya. Di dalam @keyframes ini adalah tempat Anda menentukan gaya dan tahapan untuk animasi. Berikut adalah contoh yang bagus dari efek fadeout:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Dasar-dasar dari keyframe fadeout yang baru saja kita buat meliputi:

• Nama deskriptif: dalam hal ini, fadeOut.
• Tahapan animasi: Dari diatur ke 0% dan Ke diatur ke 100%.
• Gaya CSS yang akan diterapkan pada setiap tahap.

Secara default, From akan berada di 0% dan To akan berada di 100%, karena tidak ada tahapan lain yang ditentukan dalam contoh ini.

Tindakan spesifik dengan subproperti animasi

Kita perlu melakukan sedikit lebih banyak untuk menata sesuatu — kita perlu menata properti animation dengan subproperti. Jika bingkai utama menentukan seperti apa tampilan animasi, maka sub-properti animasi menentukan aturan khusus untuk animasi. Ini memungkinkan Anda mengonfigurasi waktu, durasi, dan detail penting lainnya tentang bagaimana urutan animasi harus berkembang.

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

Bermitra dengan seniman grafis gerak

Tidak ada yang bisa menghidupkan desain Anda seperti animasi. Tetapi jika Anda belum pernah bekerja dengan seorang animator atau seniman grafis gerak, gerak mungkin terasa seperti dunia asing. Jika Anda berpikir tentang p...

• Animation-name: nama dari @keyframes at-rule, yang menjelaskan keyframe animasi. Nama fadeOut pada contoh sebelumnya adalah contoh dari nama-animasi.
• Durasi animasi: lamanya 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 .
• 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 tak terbatas untuk mengulang animasi tanpa batas.
• Animasi-arah: 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 dieksekusi.
• Animation-play-state: dengan opsi ini, Anda dapat menjeda dan melanjutkan urutan animasi. Contohnya tidak ada, maju, mundur, atau keduanya .

Menyatukan semuanya untuk dukungan browser terbaik

Ada banyak hal yang terjadi di sini, dan terminologinya bisa sedikit membingungkan. Tapi sekarang kita tahu bahwa keyframes menentukan seperti apa tampilan animasi serta tahapan animasi yang berbeda, dan bahwa properti animasi menggunakan subproperti untuk menentukan opsi animasi seperti penundaan, arah, waktu, dan sebagainya.

Anda mungkin akrab dengan vendor atau awalan browser — itu diperlukan saat bekerja dengan animasi. Kami perlu memastikan bahwa kami memiliki dukungan browser terbaik. Berikut adalah awalan browser standar:

• Chrome & Safari: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-

Internet Explorer 10 tidak memerlukan awalan untuk transisi, tetapi semua transformasi memerlukan awalan. Opera tercakup karena mengenali gaya WebKit.

Transisi mulai

• -webkit-transition
• -moz-transition
• transition

Transformasi mulai:

• -webkit-transform
• -moz-transform
• -ms-transform
• transform

Lima animasi beraksi

Sekarang setelah kita membahas dasar-dasarnya, mari buat beberapa kode untuk digunakan!

Animasi Satu: lingkaran ke kotak

Mari kita perinci yang pertama ini, sehingga kita dapat memastikan bahwa kita memahami semua konsep yang telah kita bahas sejauh ini. Animasi akan dimulai sebagai lingkaran dan berubah menjadi persegi.

Membuat div untuk memulai adalah cara yang bagus untuk menguji animasi:

<div class=”animationOne”>
</div>

Sekarang mari kita @keyframes kita. Animasi ini akan memiliki lima tahap karena persegi memiliki empat sisi dan kita harus memiliki titik awal 0%. Gunakan awalan, seperti yang ditunjukkan di bawah ini, tetapi untuk sisa tutorial kami akan membuatnya tetap sederhana hanya dengan dasar-dasarnya.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Sekarang, mari buat beberapa gaya untuk menentukan seperti apa radius perbatasan di setiap tahap:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Sekarang tambahkan properti background-color untuk membantu membedakan setiap tahap animasi:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Terakhir, mari terapkan animasi ke div uji:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Properti animasi biasanya ditulis dengan singkatan, jadi inilah yang sebenarnya terjadi dalam kode:

• Nama animasinya adalah circle-to-square .
• Durasi animasi adalah 2s .
• Penundaan animasi adalah 1s .
• Jumlah animasi-iterasi tidak infinite , sehingga akan terus berlanjut tanpa batas.
• Dan arah animasi adalah alternate . Ini berarti akan bermain dari awal sampai akhir dan kembali ke awal.

Animasi Dua: rotasi

Animasi ini memungkinkan untuk rotasi suatu objek.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Untuk menjaga agar proyek animasi kita tetap terpisah, ingatlah untuk membuat div lain untuk contoh kedua ini. Saya menambahkan warna latar belakang karena kami akan menambahkan animasi ke div itu sendiri untuk contoh ini.

Durasi animasi ini adalah dua detik, dengan penundaan tiga detik. Jumlah animasi-iterasi adalah lima, jadi proyek ini akan dianimasikan lima kali sebelum berhenti. Animasi diputar secara terbalik setiap kali ganjil (1,3,5,… ) dan dalam arah normal setiap kali genap (2,4,6,… ).

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animasi Tiga: perluas dan kedipkan

Ini adalah animasi yang bagus untuk sebuah tombol karena lebih menarik dan menonjol dibandingkan dengan elemen lain pada halaman. Ini mungkin juga sesuatu yang berharga untuk disertakan pada status :hover .

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Untuk menggunakan tes ini, kita memerlukan div starter berikut:

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

Animasi Empat: slide teks
Mari tambahkan beberapa animasi ke teks. Proyek ini membuat teks Anda meluncur sekali dari kiri.

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animasi Lima: fade in

Apakah Anda memiliki beberapa konten kejutan? Lihat animasi fade in ini untuk konten yang ingin Anda tampilkan di lain waktu. Anda memiliki banyak pilihan di sini: Fade in bisa cepat atau lambat, terjadi sekali atau beberapa kali, dan seterusnya.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

Animasi CSS3 sangat bagus untuk membuat situs web Anda bergerak dan berkembang! Sekarang setelah Anda memiliki konsep dasar untuk membuat animasi, kemungkinan animasi tidak terbatas. Apa yang akan Anda animasikan?