# \[GET\] 25+ Cool CSS Animations For Your Inspiration **URL:** \ **Category:** Give-Away and Freebies\ **Tags:** programming, streaming\ **Created:** [October 31, 2020, 12:18pm UTC](https://onehack.st/t/get-25-cool-css-animations-for-your-inspiration/160813 "2020-10-31T12:18:58Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![TheStrength](https://onehack.st/user_avatar/onehack.st/thestrength/32/46753_2.png) [@TheStrength](https://onehack.st/u/TheStrength)\ **Post date:** [October 31, 2020, 12:18pm UTC](https://onehack.st/t/get-25-cool-css-animations-for-your-inspiration/160813/1 "2020-10-31T12:18:58Z")
![image](https://onehack.st/uploads/default/original/3X/4/0/408326f62cf84356f29b72aff868e4aeda32377e.jpeg) We’ve previously published the creative text effects you can make with CSS, and many other cool things you didn’t think were possible to make with CSS. This compilation however focuses on the many things you can animate with CSS, and many of these creations will make you raise an eyebrow or two. From loading animations to toggles, and modal windows to shaking elements, this pile of **30 unusual and creative uses of CSS animation** can open your mind to more ways you can play with CSS animations that you’ve probably never thought of before. _(Source: Hongkiat)_ **Open the link into a new tab to see animation:** ##### [CSS Loading Animation](https://codepen.io/patrikhjelm/pen/hItqn) By [patrikhjelm](https://codepen.io/patrikhjelm/pen/hItqn) Seven animated dots shifting left and right to signifify a loading action. ##### [Animated Shopping Cart Icon](https://codepen.io/jonitrythall/pen/kzcnC) by [jonitrythall](https://codepen.io/jonitrythall/pen/kzcnC) Cute animated effects for when groceries are added to the shopping cart. Scroll down for more. ##### [Hamburger CSS3 only animation](https://codepen.io/DawidKrajewski/pen/GgErVO) by [Dawid Krajewski](https://codepen.io/DawidKrajewski/pen/GgErVO) Built with pure CSS, no JS or anything else. ##### [404 animated Character](https://codepen.io/WithAnEs/pen/Fxzei) By [With An Es](https://codepen.io/WithAnEs/pen/Fxzei) At least with this error page, a developer is working on it. Even if it is a 404. ##### [CSS Mars Landing](https://codepen.io/mgitch/pen/pECcD) by [mgitch](https://codepen.io/mgitch/pen/pECcD) We have landed on Mars! Made with CSS. ##### [The Avenger](https://codepen.io/mariosmaselli/pen/ghmwq) By [mariosmaselli](https://codepen.io/mariosmaselli/pen/ghmwq) Can you hear hulk’s anger shake through the screen? Cool, right? ##### [Day / Night toggle](https://codepen.io/jsndks/pen/qEXzOQ) By [jsndks](https://codepen.io/jsndks/pen/qEXzOQ) Now, you can toggle day and night with CSS. Genius idea! ##### [Google Now 3rd party app](https://codepen.io/codecalm/pen/wBgLYN) by [codecalm](https://codepen.io/codecalm/pen/wBgLYN) Google Now third party apps, animated. ##### [Clo clo](https://codepen.io/judag/pen/zxKVQR) By [judag](https://codepen.io/judag/pen/zxKVQR) Does a rooster move like that? You bet it does, complete with the jiggy neck. Great CSS3 practice. ##### [Menu icon animation](https://codepen.io/mariusbalaj/pen/fxzCG) by [mariusbalaj](https://codepen.io/mariusbalaj/pen/fxzCG) A simple idea put to action; watch the menu button materialize when you scroll down. ##### [Another CSS Preloader](https://codepen.io/Maseone/pen/rGapf) by [Maseone](https://codepen.io/Maseone/pen/rGapf) An awesome CSS rhythmic loading animation. Hypnotic, isn’t it? ##### [Submit button](https://codepen.io/auginator/pen/oElzF) by [auginator](https://codepen.io/auginator/pen/oElzF) Click to submit, and the button animates the loading process until submission is complete! ##### [Elastic SVG Sidebar Material Design](https://codepen.io/suez/pen/emjwvP) by [suez](https://codepen.io/suez/pen/emjwvP) Drag the white bar to the right to see an elastic sidebar effect. ##### [Particle button](https://codepen.io/igcorreia/pen/vEzmyV) By [igcorreia](https://codepen.io/igcorreia/pen/vEzmyV) Do what the button says: hover for awesomeness. ##### [Gooey button](https://codepen.io/lbebber/pen/LELBEo) By [Lucas Bebber](https://codepen.io/lbebber/pen/LELBEo) Click for the [Gooey effect](https://css-tricks.com/gooey-effect/). You’ll get it once you see it, and you will click on it a few times more. Amirite? ##### [Flipside button](https://codepen.io/hakimel/pen/ZYRgwB) By [hakimel](https://codepen.io/hakimel/pen/ZYRgwB) Click on any side of the Delete button and the button will flip according to where you click. ##### [True hamburger menu!](https://codepen.io/CharlesSmart/pen/gbdaOa) By [CharlesSmart](https://codepen.io/CharlesSmart/pen/gbdaOa) A truly delicious hamburger menu. Click the hamburger for effects ##### [Cruisin’](https://codepen.io/yy/pen/YPjEZw) by [yy](https://codepen.io/yy/pen/YPjEZw) See motorbike go. ##### [3D cube wave](https://codepen.io/waddington/pen/ucCIF) By [waddington](https://codepen.io/waddington/pen/ucCIF) Holy 3D Cube-sicles! ##### [Signature animation](https://codepen.io/drygiel/pen/KbhmA) By [drygiel](https://codepen.io/drygiel/pen/KbhmA) Here’s a signature that is not actually a GIF animation, but instead a PNG sequence animated with CSS3. ##### [Background gradient animation](https://codepen.io/quasimondo/pen/lDdrF) By [quasimondo](https://codepen.io/quasimondo/pen/lDdrF) This trick changes the background gradient from one color to the other in a smooth, continuous form. ##### [Star wars toggle icon](https://codepen.io/rss/pen/vIDKH) By [rss](https://codepen.io/rss/pen/vIDKH) A hamburger menu gets transformed into lightsabers in battle (a cross). ##### [GIF Style animation](https://codepen.io/jascha/pen/sIgAo) By [jascha](https://codepen.io/jascha/pen/sIgAo) Watch as a photo materializes from the midst of pixel art. ##### [Focus in/out input animation](https://codepen.io/fluxus/pen/xwDzB) By [fluxus](https://codepen.io/fluxus/pen/xwDzB) A little animated pen animated writes atop the forum you are filling in. ##### [Chromatic triangle](https://codepen.io/felipedefarias/pen/yiBjr)By [felipedefarias](https://codepen.io/felipedefarias/pen/yiBjr) An awesome optical illusion, yes, done with CSS3. ##### [Coffee maker](https://codepen.io/thisisroger/pen/mskhL) By [thisisroger](https://codepen.io/thisisroger/pen/mskhL) Here’s a reminder to take your daily dose of coffee. Like you need one. ##### [Chrome Dinosaur](https://codepen.io/nickspiel/pen/bNdBPr) By [nickspiel](https://codepen.io/nickspiel/pen/bNdBPr) Can’t reach the page you want because of a dropped connection? Here’s the dinosaur you always see when that happens, only this time it is running from a meteorite! ##### [CSS shake](https://codepen.io/elrumordelaluz/pen/pHKcC) By [elrumordelaluz](https://codepen.io/elrumordelaluz/pen/pHKcC) Hover over each effect to watch the little guy shake. ##### [Newton’s Cradle Loader](https://codepen.io/AllThingsSmitty/pen/zxGyXd) By [All Things Smitty](https://codepen.io/AllThingsSmitty/pen/zxGyXd) If you know physics, you certainly know [Newton’s cradle](http://en.wikipedia.org/wiki/Newton%27s_cradle), but probably not like this. ##### [Launch the Modal](https://codepen.io/koolhaus/pen/ajwcE) By [koolhaus](https://codepen.io/koolhaus/pen/ajwcE) Click to see the nice and smooth modal window animation. ##### [Walking Robot](https://codepen.io/P233/pen/jrguI) By [P233](https://codepen.io/P233/pen/jrguI) This robot just keeps walking, and walking, and walking, around the Y axis. ##### [Flexing Pagination Arrows](https://codepen.io/hakimel/) By [Hakim](https://codepen.io/hakimel/) From the first page to the last, this pagination animation shows clearly how if you are faring, pagewise. **Enjoy!** ---
**Author:** ![almarcano](https://onehack.st/user_avatar/onehack.st/almarcano/32/61813_2.png) [@almarcano](https://onehack.st/u/almarcano)\ **Post date:** [October 31, 2020, 5:35pm UTC](https://onehack.st/t/get-25-cool-css-animations-for-your-inspiration/160813/2 "2020-10-31T17:35:53Z")
Thank you for sharing!!! ---
**Author:** ![Shahriar\_Bro](https://onehack.st/user_avatar/onehack.st/shahriar_bro/32/24573_2.png) [@Shahriar\_Bro](https://onehack.st/u/Shahriar_Bro)\ **Post date:** [November 1, 2020, 9:53am UTC](https://onehack.st/t/get-25-cool-css-animations-for-your-inspiration/160813/3 "2020-11-01T09:53:50Z")
Awesome showcase bro!