Skip to content

add: menambahkan materi css animation #265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 1 commit into from
Oct 16, 2022
Merged

add: menambahkan materi css animation #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions CSS/058 CSS Animation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Animation

Sedikit berbeda dengan **transition**, yang terjadinya animasi hanya ketika ada perubahan kondisi. **Animation** digunakan untuk membuat animasi saat halaman dimuat. **Animasi** dibuat dengan selector **@keyframes** dan digunakan saat property **animation**. Beberapa property yang berhubungan dengan animasi yaitu:

- **Animation-delay**, menunjukkan lama waktu sebelum terjadinya animasi.
- **Animation-duration**, menunjukkan lama waktu terjadinya animasi.
- **Animation-direction**, menunjukkan arah terjadinya animasi, dapat diisi `normal`, `reverse`, dan `alternate-reverse`.
- **Animation-fill-mode**, menunjukkan bagaimana style elemen ketika animasi tidak berjalan, baik sebelum animasi maupun setelahnya, dapat diisi `none`, `forwards`, `backwards`, dan `both`.
- **Animation-iteration-count**, menunjukkan berapa kali animasi akan dijalankan.
- **Animation-name**, menunjukkan nama animasi yang akan dijalankan.
- **Animation-play-state**, menunjukkan animasi berjalan atau pause, dapat diisi `running` atau `paused`.
- **Animation-timing-function**, menunjukkan perubahan kecepatan animasi, isinya sama seperti pada transition.

Sebagai contoh, perhatikan skrip berikut:

```HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: gerak 2s ease;
}
@keyframes gerak {
from {left: 20px;}
30% {left: 800px;}
to {left: 800px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
</body>
</html>
```

`From` dapat diganti dengan 0% dan `to` dapat diganti dengan 100%.
Untuk menambahkan keyframe, tambahkan baris baru diawali dengan nilai persentase animasi diikuti perubahan property,
misal : 60%{left: 400px}. Jalankan pada browser untuk melihat hasilnya.


![Output](./assets/css_animation.gif)
Binary file added CSS/058 CSS Animation/assets/css_animation.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,3 +119,4 @@ Semua _script_ yang ada pada repositori ini, dapat diakses dengan cepat lewat li
- [Media Query](CSS/055%20CSS%20Media%20Query/README.md)
- [Flexbox](CSS/056%20CSS%20Flexbox/README.md)
- [Grid](CSS/057%20CSS%20Grid/README.md)
- [Animation](CSS/058%20CSS%20Animation/README.md)