Contoh Bentuk-Bentuk Konsep Animasi

Inilah Beberapa Nama Efek Serta Cara Kerjanya - Beberapa diantara Anda mungkin sudah mengenal berbagai macam bentuk dan nama-nama efek serta cara kerjanya (Hasil Tampilan). Ini hanya merupakan panduan dalam mengenal jenis-jenis nama efek serta hasil apa yang dapat ditampilkan saat Anda melihat atau membuat objek gerak dengan sistem perintah animasi, transisi dan hover.

//durasi
@keyframes (NAME-YOUR-ANIMATION) {
0%   { opacity: 0; }
100% { opacity: 1; }
}//multiple step
@keyframes (NAME-YOUR-ANIMATION) {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}//combinasi animasi
@keyframes (NAME-YOUR-ANIMATION) {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Jika Anda mengatakan konsep animasi merupakan elemen gerak untuk menjalankan objek dengan jumlah 2 kali gerak yang selalu bergantian, maka saat Anda membuat bentuk animasi yang memiliki awal dan akhir yang sifatnya sama, salah satu cara untuk melakukannya adalah dengan memisahkan koma pada awal 0% sampai akhir 100%, karena nilai-nilai pada individu properti animasi adalah ruang kosong. Sedangkan untuk nilai urutan bisa Anda tentukan sendiri, kecuali untuk nilai durasi dan delay seperti ini:

1s = duration, 2s = delay, 3 = iterations.

Update.!
Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, sampai pada akhir urutan animasi, yang kemudian akan berbalik keawal secara otomatis

CONTOH BENTUK KONSEP ANIMASI

Berikut beberapa contoh bentuk elemen gerak yang dapat di hasilkan dari konsep properti keyframes animasi:

# ROTASI BLINK COLOR

<style type="text/css">
#color-blink {
  background:black;
  text-align:center;
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px black,
    178px 0 0 -20px red,
    -178px 0 0 -25px black,
    -178px 0 0 -20px red,
    0 0 0 20px black,
    0 0 0 30px red,
    0 0 0 130px black,
    0 0 0 135px red;
  -moz-animation: rotate 3s linear infinite;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;}

#color-blink:before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:black;
  border: 5px solid #00FF7F;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px #00FF7F;
  -moz-animation: reverseRotate 3s linear infinite;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;}

#color-blink:after {
  content: " ";
  position: absolute;
  height:280px;
  width:280px;
  left:-90px;
  top:-90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index:2;
  -moz-animation: segmentRotate 300s linear infinite;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;}

@keyframes rotate {
  0%   { transform: rotate(  0deg); } 
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black;
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px #40E0D0,
      -178px 0 0 -25px black,
      -178px 0 0 -20px #40E0D0,
      0 0 0 20px black,
      0 0 0 30px #40E0D0,
      0 0 0 130px black,
      0 0 0 135px #40E0D0;}
  12.5%, 37.5%, 62.5%, 87.5% {
    background: #FFFF00;
    box-shadow:
      178px 0 0 -25px #39f,
      178px 0 0 -20px #39f,
      -178px 0 0 -25px #39f,
      -178px 0 0 -20px #39f,
      0 0 0 20px black,
      0 0 0 30px #39f,
      0 0 0 130px black,
      0 0 0 135px #39f;}   
  100% { transform: rotate(360deg); }}

@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); } 
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px magenta; }
  12.5%, 37.5%, 62.5%, 87.5% {
    background: magenta; box-shadow: 0 355px 0 -5px magenta, 0 355px 0 0px magenta; }   
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }}

@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }}
</style>
<div id='color-blink'>
SAHABAT BLOGGER 77
</div>

Hasilnya:

Disana Anda bisa menyaksikan beberapa contoh bentuk-bentuk konsep animasi dengan berbagai variasi. Namun perlu diketahui, dengan CSS-animasi (syntax @keyframes) itu tidak semudah yang Anda bayangkan untuk membuat objek gerak seperti ini. Anda perlu mendapatkan dukungan pada browser yang Anda gunakan seperti :

syntax animasi:
@-webkit-animation for ( Chrome, Safari 4+ )
@-moz-animation for ( Fx 5+ )
@-o-animation for ( Opera 12+ )
@animation for all browser ( IE 10+, Fx 29+ )

Terkadang demi untuk mempersingkat atau memperpendek potongan kode, [( mengatakan: dengan penggunaan -webkit dan -moz pada halaman yang tidak menggunakan prefiks adalah tidak valid )] penggunaan kode ini sering tidak di ikut sertakan saat membuat konsep animasi, sehingga hasilnya tidak dapat bekerja saat ditampilkan. Tetapi pada dasarnya dengan menyertakan kode tersebut wajib kita gunakan untuk mendapatkan dukungan pada semua vendor browser.

Animasi, seperti transisi, dapat mengubah elemen halaman dari waktu ke waktu. Dalam membuat dan membentuk konsep Animasi yang lebih kuat dan lebih kompleks, Anda perlu mendeklarasikan animasi dengan sintaks khusus sebelum Anda dapat menggunakannya, dan menentukan nilai untuk beberapa properti pada persentase yang berbeda dari awal sampai akhir animasi selesai (keyframes). Kemudian ketika Anda akan menggunakan dan menampilkannya, ada banyak nilai-nilai yang dapat Anda tentukan untuk tampilan konsep animasi Anda. Sehingga dengan semua itu, maka disana akan banyak terdapat bentuk animasi yang menarik untuk di saksikan.

Selamat berkreasi...!

Blogger, CSS, Konsep animasi

Tweet