You Won't Believe these animations made In Pure CSS
Tags: css, animation, codepen, webdev
Published: 2023-08-23 19:00:53

### 1.  Firework Effect Animation in Pure CSS

Made By Amit Sheen

<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQE8SX735PSbiA/mp4-640p-30fp-crf28/0/1688572403840?e=1693422000&v=beta&t=LSIvBl0Hyj9qG0uL0yzBBQYFPYn7Vgut8PtM_dSlTvk" type="video/mp4">
    </video>

[Source Code](https://democoding.in/codepen-ideas/firework-effect-animation-in-pure-css-2kj7)

---

### 2. SVG Water Reflection in Pure CSS

Made By Ceramic Soda

<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQEPKblYqLjPrQ/mp4-720p-30fp-crf28/0/1687925619270?e=1693422000&v=beta&t=ZELM5SQL6z9Qx8IzRwUkxB-KYP5acNtFgU2LiSYjOvY" type="video/mp4">
    </video>

[Source Code](https://democoding.in/codepen-ideas/firework-effect-animation-in-pure-css-2kj7)

---

### 3. 3D 2023 CSS Toggle Switch Animation in Pure CSS

Made By Jhey

![3D 2023 CSS Toggle Switch Animation in Pure CSS](https://media.licdn.com/dms/image/D4D22AQHlXBjH3oSpxw/feedshare-shrink_800/0/1689617061505?e=1695859200&v=beta&t=H1YlBEPIHYmBSBV64dOi8gy5Uu2K3Ok7BjODsO4pfIM)


[Source Code](https://democoding.in/codepen-ideas/3d-2023-css-toggle-switch)

---

### 4. Ring of Balls Animation in Pure CSS

Made By Amit Sheen 


<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQGLT-vlFAG4aA/mp4-640p-30fp-crf28/0/1691485193511?e=1693422000&v=beta&t=5ZVrkJbwjMUqlQiDg-EPyS47-thIfrUP4PNlof7h5SY" type="video/mp4">
    </video>

[Source Code](https://democoding.in/codepen-ideas/ring-of-balls-animation-in-pure-css-8dl7)

---

### 5. Catch the light game in pure CSS

Made By Amit Sheen 

<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQH16RHb5Y_D0g/mp4-720p-30fp-crf28/0/1687072024092?e=1693422000&v=beta&t=Kk4BUj_Qxd6rjsnqzP496Uhzc6eYx4Y_O_ex6XfUNsw" type="video/mp4">
    </video>

[Source Code](https://democoding.in/codepen-ideas/catch-the-light-game-in-pure-css-2hj7)

---

### 6. 3D Animated Loader in CSS

<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQGHCuWLy2Mf-g/mp4-720p-30fp-crf28/0/1691128776161?e=1693422000&v=beta&t=ye7CLWjGs97V4sUEzV_TOSluNbhE2p50s64KHj8rWtA" type="video/mp4">
    </video>

[Source Code](https://youtu.be/o_qSMI8hwCo)

---

### 7. Weird CSS Animation

Made by Adam

![Weird CSS Animation](https://media.licdn.com/dms/image/D4D22AQFDgpuWyKvL9w/feedshare-shrink_2048_1536/0/1686556944629?e=1695859200&v=beta&t=u3YK6x5AvBP6O33sLEMZ3bF7Bei0NZBQcBhnb3diQ0w)

[Source Code](https://democoding.in/codepen-ideas/keep-css-weird-css-animation-2hj7)

---

### 8. 3D Hand Finger tap Animation


![3D Hand Finger tap Animation](https://media.licdn.com/dms/image/D4D22AQEj3SlAcMqgTw/feedshare-shrink_2048_1536/0/1684900856390?e=1695859200&v=beta&t=82mzcqnrNJqqMRZXloyeeLiq5ciw42It7OWxdIBidK8)

[Source Code](https://youtu.be/Q-ha1S6KOFg)

---

### 9. Skeuomorphic Toggle Switch in CSS

![Skeuomorphic Toggle Switch in CSS](https://media.licdn.com/dms/image/D4D22AQHiL1wE65HQ5w/feedshare-shrink_800/0/1684687493915?e=1695859200&v=beta&t=Tr1wekm68WNwwngz5Czv5P3LOz0l8MmOtUAexBsVDow)

[Source Code](https://democoding.in/codepen-ideas/skeuomorphic-toggle-switch-in-css)

---

### 10. Amazing Solar System Animation in Pure CSS

Made BY Jordan

<video loop="" controls="">
      <source src="https://dms.licdn.com/playlist/vid/D4D05AQFEEoruQrWVjw/mp4-720p-30fp-crf28/0/1686211410243?e=1693422000&v=beta&t=sIZre2ntBTUK1J717VTOUfVBdSMHPThqVGlR3eBk7PA" type="video/mp4">
    </video>

[Source Code](https://democoding.in/codepen-ideas/amazing-solar-system-in-pure-css-2hj7)

---

---

Thank you for giving your valuable time!

If you found these helpful, share them with your mates.

---

---

 

### Latest Post

{% link https://dev.to/jon_snow789/awesome-list-of-free-css-generator-293k %}

---
---


Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)