14 Coolest CSS and JS Animations to Enhance Your Web Designs 😍✨
Tags: webdev, frontend, css, ux
Published: 2022-08-02 17:53:50

---
title: 14 Coolest CSS and JS Animations to Enhance Your Web Designs 😍✨
published: true
description: 
tags: webdev, frontend, css, ux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4ecn8qmpsfyhxq310is.png
canonical_url: https://madza.hashnode.dev/14-coolest-css-and-js-animations-to-enhance-your-web-designs
---
The ultimate goal of modern web design is to capture users' attention. There are various techniques to improve your website's appeal. One of the most appealing methods is adding some cool-looking animations to your site. 

In this article I have compiled some of the most creative animations I've seen, to inspire you for your own projects in the future. 

For each animation, I will provide a direct link, an interactive preview, as well as the author links, so you can explore more of their work, too.

<hr>

## [3D CSS Plane](https://codepen.io/jh3y/pen/NWdNMBJ)
By: [Jhey](https://codepen.io/jh3y) 

{% codepen https://codepen.io/jh3y/pen/NWdNMBJ %}

## [Portal scene](https://codepen.io/aderaaij/pen/BapYONL)
By: [Arden](https://codepen.io/aderaaij)

{% codepen https://codepen.io/aderaaij/pen/BapYONL %}

## [Space Travel](https://codepen.io/shunyadezain/pen/GRNEyZW)
By: [Shunya Koide](https://codepen.io/shunyadezain)

{% codepen https://codepen.io/shunyadezain/pen/GRNEyZW %}

## [3D Solar System](https://codepen.io/juliangarnier/pen/krNqZO)
By: [Julian Garnier](https://codepen.io/juliangarnier)

{% codepen https://codepen.io/juliangarnier/pen/krNqZO %}

## [Smart Home Temperature Slider](https://codepen.io/chrisgannon/pen/vjNNew)
By: [Chris Gannon](https://codepen.io/chrisgannon)

{% codepen https://codepen.io/chrisgannon/pen/vjNNew %}

## [Running Dude](https://codepen.io/bramvd/pen/yMReqa)
By: [Bram van Dijk](https://codepen.io/bramvd)

{% codepen https://codepen.io/bramvd/pen/yMReqa %}

## [Happy Toaster](https://codepen.io/keirafoxy/pen/BXQJoK)
By: [Lilya Zilyukina](https://codepen.io/keirafoxy)

{% codepen https://codepen.io/keirafoxy/pen/BXQJoK %}

## [Walking Dog](https://codepen.io/davidkpiano/pen/BGxgLa)
By: [David Khourshid](https://codepen.io/davidkpiano)

{% codepen https://codepen.io/davidkpiano/pen/BGxgLa %}

## [SVG Line Drawing](https://codepen.io/juliangarnier/pen/ZeEpgd)
By: [Julian Garnier](https://codepen.io/juliangarnier)

{% codepen https://codepen.io/juliangarnier/pen/ZeEpgd %}

## [Glowing Meteor](https://codepen.io/maaarj/pen/KWNLaO)
By: [Marjo Sobrecaray](https://codepen.io/maaarj)

{% codepen https://codepen.io/maaarj/pen/KWNLaO %}

## [Cat Swinging on String](https://codepen.io/davidkpiano/pen/Xempjq)
By: [David Khourshid](https://codepen.io/davidkpiano)

{% codepen https://codepen.io/davidkpiano/pen/Xempjq %}

## [Submarine](https://codepen.io/ajerez/pen/EaEEOW)
By: Alberto Jerez [ajerez](https://codepen.io/ajerez)

{% codepen https://codepen.io/ajerez/pen/EaEEOW %}

## [Funny Candle](https://codepen.io/kevin_David_k/pen/eYNeQVY)
By: [Kevin David](https://codepen.io/kevin_David_k)

{% codepen https://codepen.io/kevin_David_k/pen/eYNeQVY %}

## [Car Driving](https://codepen.io/abxlfazl/pen/NWrOBzg)
By: [abxlfazl khxrshidi](https://codepen.io/abxlfazl)

{% codepen https://codepen.io/abxlfazl/pen/NWrOBzg %}

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.