13.9.14
18
Contoh Bentuk-Bentuk Konsep Animasi - Langkah penting untuk mendapatkan dan membuat bentuk sebuah konsep animasi adalah properti yang digunakan untuk memanggil dan mengendalikan jumlah gerak yang dihasilkan dari prefiks keyframes animasi. Itu sebabnya jika kita ingin membuat sebuah bentuk konsep animasi, disana akan terdapat kode @keyframes yang harus kita tuliskan seperti ini:


//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:




DEMO SHOW




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.


Pelajari lebih lanjut pada LINK-SUMBER di bawah ini:

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Contoh Bentuk-Bentuk Konsep Animasi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. ini adalah bahan bakar blog yang mantap mbk, meski jarang jarang mengisi tapi kalau bahan bakarnya bagus seperti milik mbk Devy ini bisa ngalahin yang lain..

    BalasHapus
    Balasan
    1. tepatnya apa yang saya tahu, ya saya bagikan mas, hehe..!!

      jadi jika banyak yang mengatakan ini bagus, berarti apa yang saya bagikan hari ini, dapat memberikan manfaat buat pembaca setia

      Hapus
  2. panjang banget ya mba script nya. kadang saya penasaran sama animasi beginian tapi karena ga sampe, nyerah deh XD

    BalasHapus
    Balasan
    1. menuju tujuan sudah sampai tengah perjalanan,tetapi mundur makanya gak sampai mbak,,hehe,,

      bukan kemahiran untuk membuat tahapan animasi seperti ini, tetapi butuh ketelatenan, jadi semua orang pasti bisa kalau mau telaten, termasuk mbak sendiri :),

      Hapus
  3. ternyata bentuk animasi memiliki script yang kompleks ya kak, wah jadi pusing sendiri saya, selama ini saya hanya bisa lihat-lihat saja animasi yang keren2 di blog lain soale g bs bikin sendiri heheh :D

    BalasHapus
    Balasan
    1. tergantung style yang akan kita tampilkan mbak, pada tampilan ini saya menggabungkan efek transisi, transforms dan animasi, shingga terlihat tumpukan kode yang komplit.

      pasti bisa mbak,saya aja bisa apa bedanya sama mbak ririn, hehe..

      Hapus
  4. kalau diliat dri demo shownya..mungkin bisa dikembangkan ke pembuatan animasi avatar..!

    BalasHapus
    Balasan
    1. mungkin kalau tahap itu sudah dinamakan animator mas, saya belum bisa sampai kesana, masih tumpul dn perlu di asah terus

      Hapus
  5. Lumayan banyak juga ya Mbak Devy script animasi ini
    Saya belum pernah mencobanya Mbak. soalnya masih
    Kebentur dengan pengetahuan saya. makasih share nya Mbak Dev.. :)

    BalasHapus
    Balasan
    1. multi animasi. penggabunag beberapa elemen untuk membuet efek gerak seperti, berputar, berkedip dan animasi pergantian warna, sehingga penggunaan kode sudah pasti banyak, berbeda jika membuat dengan efek tunggal misalnya seperti ini:

      [pre]@keyframes aniload {
      from {transform:translate(0px, 1000px)}
      to {transform:translate(0px, 0px)}}

      #text-box {
      -webkit-animation:aniload 4s;
      -moz-animation:aniload 4s;
      -ms-animation:aniload 4s;
      -o-animation:aniload 4s;
      animation:aniload 4s;}[/pre]

      hasilnya - Efek Animasi Dengan Durasi


      Namun hal ini tidak mutlak, kode panjang bisa kita ganti dengan perintah JavaScript misalnya

      Hapus
  6. Kalo yg udah paham betul dg soal kode... gamblang dan runtun banget penjelasannya ya mbak.. :)

    Jadi Pingin belajar byk lagi nih.. mksh ya mbak :)

    BalasHapus
  7. Hmmm...ngeliat kode scriptnya aja saya mah dah mumet mbak, banyak banget lagi kode-kodenya :)

    BalasHapus
  8. lumayan njlimet ya...tapi asyik kalo sudah memahami dan bisa memodifikasi

    makasih mba, jadi bisa merasakan sbg animator :)

    BalasHapus
  9. keyframe itu hal yang paling utama dari pembuatan animasi
    mkasih infonya

    BalasHapus
  10. Animasi flash player seperti apa yaaa.

    BalasHapus
    Balasan
    1. flash berarti merupakan perangkat lunak komputer, sedangkan animasi adalah efek gerak yang akan dihasilkan, animasi flash itu digunakan untuk membentuk beberapa objek yang disusun dan dikirim kedalam vektor untuk dibuat efek animasi

      [blockquote]Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website[/blockquote]

      Hapus
  11. Urusan ginian nih... emang mbak Devy deh jagonya... sukses...!

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK