Cara menggunakan animation css property codepen

Bagaimana cara mengambil kode dari codepen, dan menggunakannya secara lokal di editor teks saya?

http://codepen.io/mfields/pen/BhILt

Saya mencoba bermain dengan kreasi ini secara lokal, tetapi ketika saya membukanya di chrome, saya mendapatkan halaman putih kosong tanpa terjadi apa-apa.

Saya telah menyalin, menempel dan menyimpan css dan js ke file yang berbeda dan menyimpannya, kemudian mencoba menautkannya ke file html seperti yang saya tunjukkan di atas.

Saya juga menyertakan perpustakaan jquery karena saya mengerti banyak kreasi codepen menggunakannya.

Satu-satunya kesalahan konsol yang saya dapatkan adalah

Uncaught TypeError: Cannot read property 'getContext' of null

yang menghubungkan ke file js saya, baris 4

(function(){

var canvas = document.getElementById( 'animation' ),
    c = canvas.getContext( '2d' ),

Maaf jika ini bodoh, tapi saya baru dalam hal ini. Saya yakin ini mendasar sekali. Bantuan apa pun akan luar biasa!

Tutorial Belajar jQuery Part 20: Cara Membuat Efek Animasi dengan jQuery

30 Apr 16 | | Tutorial jQuery | |

Dalam lanjutan tutorial belajar jQuery di duniailkom kali ini kita akan mempelajari cara membuat efek animasi dengan jQuery. Method yang akan digunakan adalah: animate().

Membuat Efek Animasi dengan jQuery

Salah satu alasan populernya penggunaan jQuery adalah kemudahan dalam membuat berbagai efek menarik. jQuery sendiri memiliki plugin/library tambahan yang khusus menyediakan berbagai efek animasi, yakni jQuery UI.

Namun, library jQuery ‘standar’ tetap bisa digunakan untuk membuat efek animasi, yakni dengan menggunakan method animate(). Method animate() digunakan untuk membuat animasi antara 2 buah efek CSS. Fitur ini sangat mirip dengan efek animasi di CSS3 (yang saya bahas di eBook CSS Uncover Duniailkom).

Method animate() jQuery bisa diisi dengan berbagai property CSS yang ingin dibuat efek animasinya. Sebagai contoh, jika saya memiliki sebuah elemen HTML berikut:

Untuk membuat efek animasi yang akan “memanjangkan” box diatas menjadi 500px, saya bisa menulis:

$( "#box" ).animate({ width: "500px" });

Perhatikan cara penulisan argumen untuk method animate() ini. Seluruh property CSS yang ingin dianimasikan harus berada di dalam tanda kurung kurawal { dan }.

Bagaimana jika saya ingin membuat 2 buah efek sekaligus? Caranya tambahkan property CSS kedua dengan dipisah tanda koma, seperti berikut:

$( "#box" ).animate({ width: "500px", height: "100px" });

Perintah diatas berarti saya ingin menganimasikan 2 efek, lebar (width) dan tinggi (height). Langsung saja kita lihat praktek penggunaannya:

   


  
Belajar jQuery Duniailkom
  Animate!



  

Dalam kode diatas, saya memiliki sebuah tombol Animate! dan sebuah box

$( "#box" ).animate({
   width: "80%",
   height: "80px",
   opacity: 0.4
});

   


  
Belajar jQuery Duniailkom
  Animate!



  

  
Duniailkom

$( "#paragraf" ).animate({
  fontSize: "40px",
}, 3000);