Menambahkan Daya Tarik pada Animasi Anda di Web

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Final product image — What You'll Be Creating

Ketika kita berbicara tentang penggunaan animasi kita sering membahas cara praktis kita bisa membuat transisi, animasi, dan sebagainya. Animasi adalah cara yang ampuh untuk membuat desain kita menonjol, tapi daripada berfokus pada bagaimana satu animasi bekerja, cara beberapa animasi yang digabungkan dapat menciptakan sesuatu yang lebih hebat lagi.

Appeal

12 prinsip dasar animasi Disney mendefinisikan "Appeal" sesuai dengan "karisma pada seorang aktor". Hal tersebutlah yang menunjukkan bagaimana realisme, gaya, dan substansi penambahan animasi untuk menciptakan karakter khas yang penonton anggap nyata dan menarik.

The Illusion of Life Disney Animation — The Illusion of Life: Disney Animation di mana 12 prinsip dasar animasi ditata

Ini adalah teknik dulu berpengaruh besar oleh Stripe. Stripe adalah prosesor pembayaran, dan menyediakan alat untuk menyematkan formulir pembayaran di situs. Form ini terkenal karena di desain dengan indah, terutama penggunaan animasi mereka.

Pada artikel ini saya akan membahas bagaimana beberapa animasi dapat digunakan untuk menciptakan efek lebih dari keseluruhan bagiannya, dan menunjukkan bagaimana Anda dapat menggunakan pengetahuan ini secara praktis.

Social Media Card

Dalam contoh ini kita akan menggunakan animasi untuk menyajikan kartu dengan rincian dan hiperteks ke web dan akun sosial lainnya.

Saat tombol ditekan, hal tersebut akan mengakibatkan kartu muncul dengan beberapa opsi berikut. Daripada menggunakan jendela modal biasa, kita akan menggunakan animasi untuk membuatnya lebih menarik.

Untuk membuatnya menarik, ada beberapa animasi yang dapat digunakan. Berbagai potongan animasi dan mengenalkan setiap elemen secara berurutan. Ini membantu penonton memahami hubungan antara apa yang telah mereka tekan dan konten dan urutan animasi membantu mengarahkan mata mengikuti ikon tersebut.

Menyiapkan HTML

Untuk memulai kita membutuhkan sebuah tombol untuk menekan dan sebuah kartu untuk ditunjukkan. Kartu akan disembunyikan saat konten pertama kali ditampilkan.

1	<button class="show-card">
2	<img src="https://avatars2.githubusercontent.com/u/853536?v=3&s=48">
3	Press here
4	</button>
5	<article class="card">
6	<section class="close">
7	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
8	<path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
9	</svg>
10	</section>
11	<section class="details">
12	<h2 class="name">Donovan Hutchinson</h2>
13	<p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
14	</section>
15	<section class="headshot">
16	<img src="https://avatars2.githubusercontent.com/u/853536?v=3&s=280">
17	</section>
18	<section class="icon-bar">
19	<ul>
20	<li>
21	<a href="http://cssanimation.rocks">
22	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
23	<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
24	</svg>
25	</a>
26	</li>
27	<li>
28	<a href="https://twitter.com/cssanimation">
29	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
30	<path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
31	</svg>
32	</a>
33	</li>
34	<li>
35	<a href="https://github.com/cssanimation">
36	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
37	<path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
38	</svg>
39	</a>
40	</li>
41	</section>
42	</article>

Tombolnya adalah gambar dan beberapa teks. Saat ditekan, kartu itu akan muncul. Kartu terdiri dari empat bagian; tombol tutup, bagian rincian, headshot dan ikon bar yang berisi ikon sosial. Untuk contoh ini, kami menggunakan ikon SVG inline yang diambil dari Entypo collection.

Styling

Sebelum masuk ke animasi mari kita tambahkan beberapa gaya pada tombol dan kartu. Pertama, tombolnya:

.show-card {
  background: #fff;
  border-radius: 4em;
  border: 0.25em solid #1fa756;
  color: #1fa756;
  font-size: 18px;
  left: 50%;
  line-height: 1.5;
  padding: 1em 1em 1em 4em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  outline: none;
}

.show-card img {
  border-radius: 50%;
  left: 0.3em;
  position: absolute;
  top: 0.25em;
  width: 3em;
}

Catatan: kami telah menambahkan outline: none; ke elemen show-card karena beberapa browser menambahkan cahaya khas ke keadaan tombol fokus (yang tidak kita inginkan):

Lalu kita akan menata kartu dan masing-masing bagian di dalamnya.

.card {
  bottom: calc(50% - 8em);
  display: none;
  height: 16em;
  left: calc(50% - 10em);
  position: absolute;
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
  width: 20em;
}

.close {
  color: #aaa;
  cursor: pointer;
  height: 1em;
  opacity: 0;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  z-index: 10;
}

.details {
  position: absolute;
  bottom: 2.5em;
  background: #fff;
  border-radius: 0.25em;
  height: 0;
  overflow: hidden;
  text-align: center;
  width: 20em;
}

.name {
  color: #333;
  font-weight: bold;
  margin: 3em 0 0;
  opacity: 0;
}

.description {
  color: #666;
  font-size: 1em;
  font-weight: 200;
  line-height: 1.5;
  margin: 0.75em 2em 2em;
  opacity: 0;
}

.headshot img {
  border-radius: 50%;
  border: 0.5em solid #fff;
  display: block;
  height: 6em;
  margin: -3em auto 0.5em;
  opacity: 0;
  width: 6em;
}

.icon-bar {
  background: #1fa756;
  border-radius: 0.25em;
  left: -1em;
  position: absolute;
  right: -1em;
  top: 13em;
}

.icon-bar ul {
  display: flex;
  flex-display: column;
  flex-wrap: nowrap;
  padding: 0;
}

.icon-bar li {
  display: inline-block;
  font-size: 2em;
  opacity: 0;
  padding: 0 1em;
  width: 33%;
}

.icon-bar a {
  color: #fff;
  text-decoration: none;
}

Perhatikan bahwa kita mengatur kartu ini untuk display: none Kita kemudian akan mengendalikannya menggunakan JavaScript.

Show and Hide Dasar

Daripada mempelajari lebih lanjut CSS, pertama-tama kita akan menyiapkan tindakan dasar untuk menunjukkan dan menyembunyikan informasi kontak. Ini akan menggunakan JavaScript kecil (dan dalam hal ini jQuery) untuk menambahkan dan menghapus kelas bergantung pada apa yang diklik:

// Show the card on clicking the button
$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

// Hide the card on clicking the "x"
$('.card .close').click(function(e) {
  $('.card').css('display', 'none');
});

Kita sekarang harus dapat menunjukkan dan menyembunyikan kartu menggunakan jQuery dan properti CSS display .

Lihat dasar show and hide contohnya di sini:

Sebelum animasi

Dengan tata letak yang tersedia kita perlu menambahkan beberapa gaya tambahan untuk menyembunyikan berbagai elemen sehingga kita bisa menghidupkannya ke tampilan.

.close, .name, .description, .headshot img, .icon-bar li {
  opacity: 0;
}
.details {
  height: 0;
}

Unsur-unsur ini akan memiliki penundaan sebelum animasi mereka mulai berlaku, jadi perlu di luar pandangan pada awalnya.

Animasi Dasar

Dengan mekanisme yang tersedia untuk menunjukkan dan menyembunyikan kartu, kita bisa mulai melampirkan animasi. JavaScript di atas menambahkan status show ke kartu yang ada di acara, dan kami dapat melampirkan animasi ke kelas ini yang akan mengenalkan masing-masing bagian kartu.

Untuk melakukan ini kita akan menggunakan properti animation CSS dan set keyframes.

Akan sangat membantu untuk membuat animasi general-purpose di CSS dan menggunakannya kembali. Animasi sederhana seperti memudar masuk dan keluar dapat didefinisikan sekali dan digunakan di banyak tempat.

Untuk menunjukkan bagaimana keyframes didefinisikan, mari kita membuat animasi pudar dan memudar.

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Keyframes adalah serangkaian langkah, yang didefinisikan sebagai persentase. Mereka bisa berupa sejumlah langkah tapi dalam contoh kita, kita hanya menentukan awal (0%) dan akhir (100%) keyframes. Dalam fade-in kita mulai tanpa opacity (0) dan diakhiri dengan opacity penuh (1). Animasi fade-out melakukan yang sebaliknya.

Kita bisa menggunakan properti animation untuk menerapkan animasi pudar ini ke tombol saat ditampilkan dan disembunyikan.

.show-card {
  animation: fade-in 0.4s 1s forwards ease-out;
}
.show-card.hide {
  animation: fade-out 0.4s forwards ease-out;
}

Animasi Tulisan Cepat di sini memberi tahu kartu untuk menggunakan animasi fade-in , yang bertahan 0,4 detik dengan penundaan 1 detik. Animasi akan diputar sekali dan berhenti di ujung (ke depan) dan gunakan fungsi waktu ease-out .

Saat kelas hide diterapkan pada tombolnya, animasi fade-out mulai berlaku.

Fungsi Waktu Bouncy Effect

Bagian pertama yang akan kami perkenalkan adalah ikon bar. Karena di sinilah letak hubungan, kami ingin hal itu menonjol dan menjadi hal pertama yang diperhatikan orang.

Saat membuat animasi kita bisa membuat efek menarik dengan menggunakan fungsi waktu dengan baik. Dalam hal ini kita akan menggunakan fungsi waktu cubic-bezier untuk menambahkan beberapa " bounce " saat ikon bar muncul.

Pertama kita akan membuat beberapa keyframe sederhana untuk memiliki bar awalan kecil dan bertambah ukurannya.

@keyframes show-icon-bar {
  0% {
    height: 0;
  }
  100% {
    height: 4.5em;
  }
}

Sekarang kita dapat menerapkan set keyframe ini ke ikon bar saat kelas show ditambahkan ke kartu.

1	.card.show .icon-bar {
2	animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64);
3	}

Bouncy effect dibuat dengan menggunakan fungsi waktu cubic-bezier . Fungsi waktu menggambarkan perubahan kecepatan melalui animasi, dan dapat dirancang untuk over-shoot pada awalan atau akhir animasi. Animasi ini berjalan sedikit di atas, lalu dikoreksi, dengan diciptakannya bounce.

Penundaan animasi

Dengan ikon bar diperkenalkan, kita perlu menghidupkan bagian yang berisi rincian dan headshot. Kita ingin bagian ini muncul setelah ikon bar diperkenalkan. Untuk mencapai hal ini kita akan menggunakan properti animation-delay .

1	.card.show .details {
2	animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42);
3	}

Animasi yang diaplikasikan ke bagian details diatur untuk memiliki durasi 0,7 detik, dan penundaan 0,5 detik. Ini berarti animasi tidak akan dimulai sampai setelah ikon bar diperkenalkan.

Kami juga menggunakan fungsi waktu cubic bezier disini untuk memberikan beberapa bounce.

Selanjutnya kita mendefinisikan keyframes untuk wadah animasi ini.

@keyframes show-detail-container {
  0% {
    height: 0;
  }
  100% {
    height: 13.5em;
  }
}

Keyframe animasi show-detail-container dimulai dengan wadah tak terlihat dengan tinggi nol, dan meng animasi hingga keseluruhan. Fungsi waktu cubic bezier kemudian membuat animasi overshoot sedikit untuk memberikan beberapa bounce.

Menggabungkan Beberapa Animasi

Beberapa animasi dapat diterapkan dalam satu properti. Selama animasi tidak saling bertentangan (dengan mencoba menghidupkan properti yang sama), mereka bisa digunakan untuk menambahkan nuansa ke animasi. Beberapa animasi didefinisikan seperti animasi tunggal, namun dipisahkan dengan koma.

Dalam kasus ini kita akan memberikan efek memudar pada headshot, nama dan konten deskripsi dimana pada saat yang sama menggunakan fungsi pop-in agar gambar tampak lebih dekat dari jarak yang jauh.

Jika kita menggunakan satu animasi tunggal, dengan fungsi waktu cubic bezier, efek pudar akan tampak bounce dan terlihat aneh. Sebagai gantinya, kita akan memiliki fade menggunakan fungsi waktu linier dan zoom akan menghasilkan efek bounce.

Pertama kita mendefinisikan keyframe pop-in .

@keyframes pop-in {
  0% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}

Ini menggunakan transformasi scale agar masing-masing elemen mulai lebih kecil dan bertambah besar menjadi normal.

Mari kita bawa kontennya. Setiap elemen memiliki dua animasi, dan masing-masing elemen memiliki animasi yang sedikit delay lebih lama untuk mengatur secara bergiliran penampilan mereka.

.card.show .headshot img {
  animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .name {
  animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64);
}
.card.show .description {
  animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64);
}

Ikon Penutup

Animasi ikon penutup menggunakan keyframe fade-in yang telah kita definisikan sebelumnya.

1	.card.show .close {
2	animation: fade-in 0.3s 1.3s forwards;
3	}

Calls to Action

Kita hanya perlu menunjukkan ikonnya sekarang. Saat menyajikan animasi, animasi yang terakhir adalah tempat perhatian penonton akan berakhir. Ini berarti bahwa penonton akan mengikuti animasi dan pada akhirnya melihat ikon yang kita ingin mereka pilih.

Kami akan kembali memanfaatkan properti animasi delay untuk memastikannya diperkenalkan terakhir. Pertama, kita mendefinisikan keyframes animasi untuk ikon:

@keyframes show-icon {
  0% {
    opacity: 0;
    transform: rotateZ(-40deg);
  }
  100% {
    opacity: 1;
    transform: rotateZ(0);
  }
}

Setiap ikon akan berputar sedikit saat memudar. Kita sekarang bisa melampirkan animasi ini ke masing-masing ikon, dengan menggunakan penundaan pada masing-masing untuk menghadirkan mereka secara bergiliran.

.card.show .icon-bar li {
  animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64);
}

.card.show .icon-bar li:nth-child(1) {
  animation-delay: 1.8s;
}
.card.show .icon-bar li:nth-child(2) {
  animation-delay: 1.9s;
}
.card.show .icon-bar li:nth-child(3) {
  animation-delay: 2s;
}

Pergunakan semua ini bersama-sama dan sekarang kita memiliki kartu yang tampil dengan baik saat tombol dipilih.

Satu Hal Lagi

Sebelum kita bisa menyelesaikannya, kita perlu menambahkan tindakan hide ke tombol penutup dan membuat animasi kartu pergi. Pertama kita akan mengupdate JavaScript. Saat menekan ikon close , JavaScript menunggu satu detik sebelum mengeluarkan kartu dengan display: none.

$('.show-card').click(function(e) {
  $('.card').addClass('show').css('display', 'block');
  $('.show-card').addClass('hide');
});

$('.card .close').click(function(e) {
  $('.card').addClass('hide');
  setTimeout(function() {
    $('.card').css('display', 'none').removeClass('show').removeClass('hide');
  }, 1000);
  $('.show-card').removeClass('hide');
});

Ini memberi kita waktu satu detik untuk membuat animasi dari kartu-kita akan melihatnya jatuh dari bagian bawah layar. Keyframes yang mencapainya adalah sebagai berikut:

@keyframes drop-card {
  100% {
    bottom: -100%;
    transform: rotateZ(20deg);
    opacity: 0;
  }
}

Kita kemudian menerapkannya sebagai animasi ke kartu.

1	.card.hide {
2	animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42);
3	}

Demo

Setelah mempergunakan semuanya, Anda bisa melihat hasilnya di sini.

Catatan tentang Prefixes dan Kompatibilitas Browser

Animasi didukung dengan baik di seluruh browser. Bergantung pada penonton Anda, semua hal tersebut harus bekerja dalam banyak situasi. Perlu memastikan dasar fungsi show and hide bekerja dan animasi apapun ditambahkan sebagai progressive enhancement.

Ringkasan

Dengan penggunaan beberapa animasi, dan khususnya properti animation-delay , kami telah menggunakan widget yang sangat sederhana dan membuatnya lebih menarik. Animasi memandu penonton melalui masing-masing elemen dan mengarahkannya ke calls to action.

Animasi bisa menjadi cara yang hebat untuk berkomunikasi dalam desain Anda. Komunikasi ini membantu pengunjung memahami maksud Anda sekaligus meningkatkan kredibilitas dan kepercayaan diri terhadap kualitas pekerjaan Anda.