Contoh Animasi CSS HTML Keren

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

See the Pen Only Css Animation #01 by Hisami Kurita (@hisamikurita) on CodePen.

Author: Hisami Kurita
Links: Source Code / Demo
Created on: September 7, 2019
Made with: HTML, CSS

2. The handbook download animation

See the Pen The handbook download animation by Yancy Min (@yancy) on CodePen.

Author: Yancy Min
Links: Source Code / Demo
Created on: July 29, 2018
Made with: HTML, CSS

3. Info Cards Concept

See the Pen Info Cards Concept by Yancy Min (@yancy) on CodePen.

Author: Yancy Min
Links: Source Code / Demo
Created on: October 8, 2018
Made with: HTML, CSS

4. CSS Animation: Time of Day

See the Pen CSS Animation: Time of Day by Olivia Ng (@oliviale) on CodePen.

Author: Olivia Ng
Links: Source Code / Demo
Created on: APRIL 23, 2018
Made with: HTML, CSS, JS

5. Cool Layout with Complex Chainable Animation

See the Pen Cool Layout with Complex Chainable Animation by Nikolay Talanov (@suez) on CodePen.

Author: Nikolay Talanov
Links: Source Code / Demo
Created on: JULY 10, 2016
Made with: HTML, CSS, JS

6. Netflix Intro Animation Pure CSS

See the Pen Netflix Intro Animation Pure CSS by Claudio Bonfati (@claudio_bonfati) on CodePen.

Author: Claudio Bonfati
Links: Source Code / Demo
Created on: NOVEMBER 29, 2020
Made with: HTML, CSS

7. Cinematic Animation | @keyframers 3.21

See the Pen Cinematic Animation | @keyframers 3.21 by @keyframers (@keyframers) on CodePen.

Author: @keyframers
Links: Source Code / Demo
Created on: JANUARY 6, 2021
Made with: HTML, CSS

8. Simple Glassmorphism

See the Pen Glassmorphism by Supriya (@omeal) on CodePen.

Author: @omeal
Links: Source Code / Demo
Made with: HTML, CSS

9. Glassmorphism Creative Cloud App Redesign

See the Pen Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur) on CodePen.

Author: @TurkAysenur
Links: Source Code / Demo
Made with: HTML, CSS, Javascript

10. Proximity Glow Cards

See the Pen Proximity Glow Cards by Jhey (@jh3y) on CodePen.

Author: @Jhey
Links: Source Code / Demo
Made with: HTML, CSS, Javascript

11. CSS scroll-driven scroll-snapping animations

See the Pen CSS scroll-driven scroll-snapping animations by Giana (@giana) on CodePen.

Author: @Giana
Links: Source Code / Demo
Made with: HTML, CSS

12. Cards (gradient border)

See the Pen Cards (gradient border) by Dan (@dtab428) on CodePen.

Author: @Dan
Links: Source Code / Demo
Made with: HTML, CSS, Javascript