Animasi CSS dan desain UI website adalah cara yang efektif untuk menarik perhatian dan mebuat pengunjung website senang.
Meskipun ada beberapa cara untuk menambahkan grafik animasi ke halaman website, salah satu yang paling mudah adalah menggunakan animasi CSS yang hanya membutuhkan beberapa pengetahuan HTML dan CSS untuk membuatnya.
Bagaimana cara kerja animasi CSS ?
Animasi CSS adalah fitur CSS yang memungkinkan Anda menganimasikan perubahan dalam satu atau beberapa style elemen. Animasi CSS tidak memerlukan kode tambahan misal javascript atau media .gif. Semuanya dibuat dengan HTML dan CSS.
Animasi CSS sangat bagus untuk website yang ingin menambahkan konten dinamis dan menarik tanpa memberikan beban yang signifikan pada website.
Untuk membuatnya, Anda memerlukan tiga hal, elemen HTML untuk dianimasikan, aturan CSS untuk menghubungkan animasi pada elemen dan keyframe untuk menentukan animasi awal dan akhir.
1. Only Css Animation #01
Author: Hisami Kurita
Links: Source Code / Demo
Created on: September 7, 2019
Made with: HTML, CSS
2. The handbook download animation
Author: Yancy Min
Links: Source Code / Demo
Created on: July 29, 2018
Made with: HTML, CSS
3. Info Cards Concept
Author: Yancy Min
Links: Source Code / Demo
Created on: October 8, 2018
Made with: HTML, CSS
4. CSS Animation: Time of Day
Author: Olivia Ng
Links: Source Code / Demo
Created on: APRIL 23, 2018
Made with: HTML, CSS, JS
5. Cool Layout with Complex Chainable Animation
Author: Nikolay Talanov
Links: Source Code / Demo
Created on: JULY 10, 2016
Made with: HTML, CSS, JS
6. Netflix Intro Animation Pure CSS
Author: Claudio Bonfati
Links: Source Code / Demo
Created on: NOVEMBER 29, 2020
Made with: HTML, CSS
7. Cinematic Animation | @keyframers 3.21
Author: @keyframers
Links: Source Code / Demo
Created on: JANUARY 6, 2021
Made with: HTML, CSS
8. Simple Glassmorphism
Author: @omeal
Links: Source Code / Demo
Made with: HTML, CSS
9. Glassmorphism Creative Cloud App Redesign
Author: @TurkAysenur
Links: Source Code / Demo
Made with: HTML, CSS, Javascript
10. Proximity Glow Cards
Author: @Jhey
Links: Source Code / Demo
Made with: HTML, CSS, Javascript
11. CSS scroll-driven scroll-snapping animations
Author: @Giana
Links: Source Code / Demo
Made with: HTML, CSS
12. Cards (gradient border)
Author: @Dan
Links: Source Code / Demo
Made with: HTML, CSS, Javascript
Penutup
Sekian Penjelasan Singkat Mengenai Animasi CSS dan desain UI website. Semoga Bisa Menambah Pengetahuan Kita Semua.
