Cara menggunakan css keyframes codepen
Kali ini saya akan menjelaskan pengertian CodePen dan tutorial bagaimana caranya membuat akun CodePen untuk kepentingan Blogger. Show
Apa itu CodePen? Apa fungsi dan manfaat membuat akun CodePen? Pengertian CodePenCodePen adalah sebuah komunitas Online untuk menguji dan menampilkan cuplikan kode HTML, CSS, dan JavaScript (Js) yang dibuat oleh penggunanya. Bisa dibilang, CodePen merupakan tempat atau lingkungan pembelajaran sumber terbuka, tempat pengembangan cuplikan kode, yang disebut "Pens" serta tempat pengujiannya. Cara Membuat Akun CodePen Terbaru Lengkap dengan GambarBerikut langkah-langkah cara daftar akun CodePen lengkap dengan gambar. Silakan registrasi akun CodePen di sini: https://codepen.io/accounts/signup Sign Up (Free) > Sign Up with Email Silakan isi nama pada Your Name dan Username. Masukkan juga alamat Email yang dimiliki serta Password (kata sandi). Pada menu Location, masukkan Indonesia. Untuk Link #1 silakan isi dengan alamat blog yang kalian miliki, contohnya:
Jangan lupa untuk menambahkan Avatar atau Display Picture (foto profil) pada akun CodePen yang ingin dibuat. Nantinya kalian akan diberikan instruksi cara menggunakan CodePen dengan benar. Ikuti saja perintah yang diberikan oleh sistem CodePen. Verify Your Email AddressSetelah membuat akun atau daftar akun di CodePen, jangan lupa untuk memverifikasi alamat Email yang digunakan tadi. Verifikasi ini sangat penting mengingat sewaktu-waktu kita bisa lupa Password atau tidak bisa masuk ke akun CodePen. Ket: Tekan tombol Run Pen pada CodePen di atas. Keren banget! Itu dia pengertian CodePen dan tutorial bagaimana caranya membuat akun CodePen. Ok semoga berguna. 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
yang menghubungkan ke file js saya, baris 4
Maaf jika ini bodoh, tapi saya baru dalam hal ini. Saya yakin ini mendasar sekali. Bantuan apa pun akan luar biasa!
How to Create Web Animations with Anime.jsThere are many JavaScript animation libraries out there, but Anime.js is one of the best. It’s easy to use, has a small and simple API, and offers everything you could want from a modern animation engine. The library has a small file size and supports all modern browsers, including IE/Edge 11+. The only thing that could stop you from using Anime.js right away is its minimal, zen-like documentation. I like the compact, structured, elegant approach it takes, but I think that a more detailed explanation would be helpful. I’ll try to fix this issue in this tutorial. To get started, download and include the
Alternatively, you can use the latest version of the library hosted on a CDN:
Now, to create an animation, we use the
There are several kinds of properties used to describe the animation. They are grouped into four distinct categories:
Let’s now see how this applies in practice. Consider the following example:
See the Pen Note: I’m not going to cover the HTML and CSS sections of the code in the tutorial. These tend to be easy to grasp without additional explanation. You can find and explore the HTML and CSS in the embedded pens that follow each example. In the above example:
You may notice that I don’t use any units when specifying property values. That’s because if the original value has a unit, it is automatically added to the animated value. So, we can safely omit the units. But if we want to use a specific unit we must add it intentionally. Let’s create something more meaningful. Creating a Pendulum AnimationIn this example, we will create a pendulum animation. After we “draw” a pendulum using our HTML and CSS skills, it’s time to bring it to life:
See the Pen
In this animation, we use the so-called from-to value type, which defines a range of movement for the animation. In our case, the rod of the pendulum is rotated from Well done. Let’s move to the next example. Creating a Battery Charge AnimationIn this example, we want to create an animated icon of a charging battery, similar to the icons on our smartphones. This is easily doable with a bit of HTML and CSS. Here is the code for the animation:
See the Pen Here we have three segments (the green To do so, instead of a
literal value, we provide a function with three arguments ( We also use the Improving the Battery Charging AnimationNow, the animation looks good, but let’s improve it a bit by adding a progress label that shows the charge percentage. Here is the code:
See the Pen This example introduces several more library features. We’ll explore them one by one. First, we create a The first animation is almost identical to the previous example, except
for the In the second animation, we use the Next, we use two of the callbacks which Anime.js offers. To bind the progress label value from HTML with the As a result, the charging animation will play until the progress becomes 100% and then it will stop and force the segments to their end animation state. The icon will appear as fully charged. Creating More Complex Animations With KeyframesUp until now, we’ve dealt with one-step animations that move an object from A to B. But what about moving it from A to B to C to D? In the next example, we’ll explore how to use property keyframes to create multi-step animations. We’ll move a simple square around another one that serves as a box.
See the Pen First, we create a reference
to the box element. We use it in the For each property we want to animate, we use an array of objects where each object describes a particular keyframe. In our case, we want to move the square vertically and horizontally. So we use The frames are executed from top to bottom and start simultaneously for each property that has a specified keyframes array. Once started, how the ride will continue depends entirely on the way the The result of our animation is that the square exits the box, makes a full orbit around it, and then goes inside again. Creating Text EffectsWe’ve seen an example of staggering above, and now we’ll explore more advanced usage. We’ll use staggering to create a cool text effect.
See the Pen We’ve put each letter inside a Then, we rotate the letters by using a specific property parameter which defines specific parameters to a given property. This gives us more detailed
control over the animation. Here, the letters will be rotated 360 degrees in two seconds applying In the next two properties, we use the We set the animation to wait a second before it starts (by defining a start value), and then a 100-millisecond delay is added relatively for each letter. We intentionally add the Creating Animations with TimelinesA timeline lets you manipulate multiple animations together. Let’s explore a simple example:
See the Pen In this example, we create a ball spinner. To create a timeline, we use the To add an animation to the timeline, we use the In our example, we add three animations, one for each ball. The result is that each ball rises and falls one by one. The problem is that in this basic form, the animation seems very static. Let’s change that. By default, each animation starts after the previous animation ends. But we can control this behavior by using time offsets. Also, if we want to make the animation more flexible and complex, we have to use animation keyframes. Let’s see how this applies in the following example:
See the Pen
Here, we remove the To make the balls move smoothly, we use time offsets which are specified as the second parameter to the The result is a smooth ball spinner animation. ConclusionI hope that you’ve gained a much better understanding of Anime.js. To continue your learning with this foundational knowledge in hand, I recommend checking out the documentation. Anime.js is a simple but powerful animation engine that can be used to create a broad range of animations. Let your imagination run wild. |