{"id":23732,"date":"2022-08-20T18:01:12","date_gmt":"2022-08-20T10:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23732"},"modified":"2022-08-19T18:58:50","modified_gmt":"2022-08-19T10:58:50","slug":"creative-css-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/","title":{"rendered":"30 Cool CSS Animations For Your Inspiration"},"content":{"rendered":"<p>CSS is one of the most versatile programming languages in popular use. From layouts and <a href=\"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/\">text effects<\/a> to colour and size of your content, the possibilities are endless. One of the most interesting uses of CSS is to create animations. And this is what this post is all about.<\/p>\n<p>This post lists some of the most creative CSS animations you\u2019ll find on the web. From transition effects to character animations, you\u2019ll find some really cool examples here that you can either directly use in your project or take inspiration from. So, take a look and pick your favorite.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/\" class=\"ref-block__link\" title=\"Read More: 10 CSS3 Animation Tools You Should Bookmark\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 CSS3 Animation Tools You Should Bookmark<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25432 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 CSS3 Animation Tools You Should Bookmark<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs people tend to more easily perceive things that move, smartly used animations can enhance the user experience...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/patrikhjelm\/pen\/hItqn\">CSS Loading Animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/patrikhjelm\/pen\/hItqn\" rel=\"noopener nofollow\">patrikhjelm<\/a><\/p>\n<p>Seven animated dots shift left and right to signify a loading action.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"hItqn\" data-default-tab=\"result\" data-user=\"patrikhjelm\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/jonitrythall\/pen\/kzcnC\">Animated Shopping Cart Icon<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/jonitrythall\/pen\/kzcnC\" rel=\"noopener nofollow\">jonitrythall<\/a><\/p>\n<p>Cute animated effects for when groceries are added to the shopping cart. Scroll down for more.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"kzcnC\" data-default-tab=\"result\" data-user=\"jonitrythall\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/DawidKrajewski\/pen\/GgErVO\">Hamburger CSS3 only animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/DawidKrajewski\/pen\/GgErVO\" rel=\"noopener nofollow\">Dawid Krajewski<\/a><\/p>\n<p>Built with pure CSS, no JS or anything else.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"GgErVO\" data-default-tab=\"result\" data-user=\"DawidKrajewski\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/WithAnEs\/pen\/Fxzei\">404 animated Character<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/WithAnEs\/pen\/Fxzei\" rel=\"noopener nofollow\">With An Es<\/a><\/p>\n<p>At least with this error page, a developer is working on it. Even if it is a 404.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"Fxzei\" data-default-tab=\"result\" data-user=\"WithAnEs\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mgitch\/pen\/pECcD\">CSS Mars Landing<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/mgitch\/pen\/pECcD\" rel=\"noopener nofollow\">mgitch<\/a><\/p>\n<p>We have landed on Mars! Made with CSS.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"pECcD\" data-default-tab=\"result\" data-user=\"mgitch\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mariosmaselli\/pen\/ghmwq\">The Avenger<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/mariosmaselli\/pen\/ghmwq\" rel=\"noopener nofollow\">mariosmaselli<\/a><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mariosmaselli\/pen\/ghmwq\"><\/a> Can you hear hulk\u2019s anger shake through the screen? Cool, right?<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"ghmwq\" data-default-tab=\"result\" data-user=\"mariosmaselli\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/jsndks\/pen\/qEXzOQ\">Day \/ Night toggle<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/jsndks\/pen\/qEXzOQ\" rel=\"noopener nofollow\">jsndks<\/a><\/p>\n<p>Now, you can toggle day and night with CSS. Genius idea!<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"qEXzOQ\" data-default-tab=\"result\" data-user=\"jsndks\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/codecalm\/pen\/wBgLYN\">Google Now 3rd party app<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/codecalm\/pen\/wBgLYN\" rel=\"noopener nofollow\">codecalm<\/a><\/p>\n<p>Google Now third party apps, animated.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"wBgLYN\" data-default-tab=\"result\" data-user=\"codecalm\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/judag\/pen\/zxKVQR\">Clo clo<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/judag\/pen\/zxKVQR\" rel=\"noopener nofollow\">judag<\/a><\/p>\n<p>Does a rooster move like that? You bet it does, complete with the jiggy neck. Great CSS3 practice.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"zxKVQR\" data-default-tab=\"result\" data-user=\"judag\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/Maseone\/pen\/rGapf\">Another CSS Preloader<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/Maseone\/pen\/rGapf\" rel=\"noopener nofollow\">Maseone<\/a><\/p>\n<p>An awesome CSS rhythmic loading animation. Hypnotic, isn\u2019t it?<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"rGapf\" data-default-tab=\"result\" data-user=\"Maseone\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/auginator\/pen\/oElzF\">Submit button<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/auginator\/pen\/oElzF\" rel=\"noopener nofollow\">auginator<\/a><\/p>\n<p>Click to submit, and the button animates the loading process until submission is complete!<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"oElzF\" data-default-tab=\"result\" data-user=\"auginator\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/suez\/pen\/emjwvP\">Elastic SVG Sidebar Material Design<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/suez\/pen\/emjwvP\" rel=\"noopener nofollow\">suez<\/a><\/p>\n<p>Drag the white bar to the right to see an elastic sidebar effect.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"emjwvP\" data-default-tab=\"result\" data-user=\"suez\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/igcorreia\/pen\/vEzmyV\">Particle button<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/igcorreia\/pen\/vEzmyV\" rel=\"noopener nofollow\">igcorreia<\/a><\/p>\n<p>Do what the button says: hover for awesomeness.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"vEzmyV\" data-default-tab=\"result\" data-user=\"igcorreia\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/lbebber\/pen\/LELBEo\">Gooey button<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/lbebber\/pen\/LELBEo\" rel=\"noopener nofollow\">Lucas Bebber<\/a><\/p>\n<p>Click for the <a href=\"https:\/\/css-tricks.com\/gooey-effect\/\">Gooey effect<\/a>. You\u2019ll get it once you see it, and you will click on it a few times more. Amirite?<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"LELBEo\" data-default-tab=\"result\" data-user=\"lbebber\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/hakimel\/pen\/ZYRgwB\">Flipside button<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/hakimel\/pen\/ZYRgwB\" rel=\"noopener nofollow\">hakimel<\/a><\/p>\n<p>Click on any side of the Delete button and the button will flip according to where you click.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"ZYRgwB\" data-default-tab=\"result\" data-user=\"hakimel\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/CharlesSmart\/pen\/gbdaOa\">True hamburger menu!<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/CharlesSmart\/pen\/gbdaOa\" rel=\"noopener nofollow\">CharlesSmart<\/a><\/p>\n<p>A truly delicious hamburger menu. Click the hamburger for effects<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"gbdaOa\" data-default-tab=\"result\" data-user=\"CharlesSmart\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yy\/pen\/YPjEZw\">Cruisin\u2019<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/yy\/pen\/YPjEZw\" rel=\"noopener nofollow\">yy<\/a><\/p>\n<p>See motorbike go.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"YPjEZw\" data-default-tab=\"result\" data-user=\"yy\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/waddington\/pen\/ucCIF\">3D cube wave<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/waddington\/pen\/ucCIF\" rel=\"noopener nofollow\">waddington<\/a><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/waddington\/pen\/ucCIF\"><\/a> Holy 3D Cube-sicles!<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"ucCIF\" data-default-tab=\"result\" data-user=\"waddington\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/drygiel\/pen\/KbhmA\">Signature animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/drygiel\/pen\/KbhmA\" rel=\"noopener nofollow\">drygiel<\/a><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/drygiel\/pen\/KbhmA\"><\/a> Here\u2019s a signature that is not actually a GIF animation, but instead a PNG sequence animated with CSS3.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"KbhmA\" data-default-tab=\"result\" data-user=\"drygiel\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/quasimondo\/pen\/lDdrF\">Background gradient animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/quasimondo\/pen\/lDdrF\" rel=\"noopener nofollow\">quasimondo<\/a><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/quasimondo\/pen\/lDdrF\"><\/a> This trick changes the background gradient from one color to the other in a smooth, continuous form.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"lDdrF\" data-default-tab=\"result\" data-user=\"quasimondo\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/rss\/pen\/vIDKH\">Star wars toggle icon<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/rss\/pen\/vIDKH\" rel=\"noopener nofollow\">rss<\/a><\/p>\n<p>A hamburger menu gets transformed into lightsabers in battle (a cross).<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"vIDKH\" data-default-tab=\"result\" data-user=\"rss\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/jascha\/pen\/sIgAo\">GIF Style animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/jascha\/pen\/sIgAo\" rel=\"noopener nofollow\">jascha<\/a><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/jascha\/pen\/sIgAo\"><\/a> Watch as a photo materializes from the midst of pixel art.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"sIgAo\" data-default-tab=\"result\" data-user=\"jascha\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/fluxus\/pen\/xwDzB\">Focus in\/out input animation<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/fluxus\/pen\/xwDzB\" rel=\"noopener nofollow\">fluxus<\/a><\/p>\n<p>A little animated pen animated writes atop the forom you are filling in.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"xwDzB\" data-default-tab=\"result\" data-user=\"fluxus\" class=\"codepen\">\n<\/p><h3> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/felipedefarias\/pen\/yiBjr\">Chromatic triangle<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/felipedefarias\/pen\/yiBjr\" rel=\"noopener nofollow\">felipedefarias<\/a><\/p>\n<p>An awesome optical illusion, yes, done with CSS3.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"yiBjr\" data-default-tab=\"result\" data-user=\"felipedefarias\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/thisisroger\/pen\/mskhL\">Coffee maker<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/thisisroger\/pen\/mskhL\" rel=\"noopener nofollow\">thisisroger<\/a><\/p>\n<p>Here\u2019s a reminder to take your daily dose of coffee. Like you need one.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"mskhL\" data-default-tab=\"result\" data-user=\"thisisroger\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/nickspiel\/pen\/bNdBPr\">Chrome Dinosaur<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/nickspiel\/pen\/bNdBPr\" rel=\"noopener nofollow\">nickspiel<\/a><\/p>\n<p>Can\u2019t reach the page you want beacuse of a dropped connection? Here\u2019s the dinosaur you always see when that happens, only this time it is running from a meteorite!<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"bNdBPr\" data-default-tab=\"result\" data-user=\"nickspiel\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/elrumordelaluz\/pen\/pHKcC\">CSS shake<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/elrumordelaluz\/pen\/pHKcC\" rel=\"noopener nofollow\">elrumordelaluz<\/a><\/p>\n<p>Hover over each effect to watch the little guy shake.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"pHKcC\" data-default-tab=\"result\" data-user=\"elrumordelaluz\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/AllThingsSmitty\/pen\/zxGyXd\">Newton\u2019s Cradle Loader<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/AllThingsSmitty\/pen\/zxGyXd\" rel=\"noopener nofollow\">All Things Smitty<\/a><\/p>\n<p>If you know physics, you certainly know <a href=\"https:\/\/en.wikipedia.org\/wiki\/Newton%27s_cradle\">Newton\u2019s cradle<\/a>, but probably not like this.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"zxGyXd\" data-default-tab=\"result\" data-user=\"AllThingsSmitty\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/koolhaus\/pen\/ajwcE\">Launch the Modal<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/koolhaus\/pen\/ajwcE\" rel=\"noopener nofollow\">koolhaus<\/a><\/p>\n<p>Click to see the nice and smooth modal window animation.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"ajwcE\" data-default-tab=\"result\" data-user=\"koolhaus\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/P233\/pen\/jrguI\">Walking Robot<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/P233\/pen\/jrguI\" rel=\"noopener nofollow\">P233<\/a><\/p>\n<p>This robot just keeps walking, and walking, and walking, around the Y axis.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"jrguI\" data-default-tab=\"result\" data-user=\"P233\" class=\"codepen\">\n<\/p><h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/hakimel\/\">Flexing Pagination Arrows<\/a><\/h3>\n<p>Creator: <a target=\"_blank\" href=\"https:\/\/codepen.io\/hakimel\/\" rel=\"noopener nofollow\">Hakim<\/a><\/p>\n<p><a href=\"https:\/\/hakim.se\/\"><\/a> From the first page to the last, this pagination animation shows clearly how if you are faring, pagewise.<\/p>\n<p data-height=\"350\" data-theme-id=\"12825\" data-slug-hash=\"gfIsk\" data-default-tab=\"result\" data-user=\"hakimel\" class=\"codepen\">\n<\/p><p><script async src=\"https:\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2>Here\u2019s more:<\/h2>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/marcofolio.net\/css-3d-helix\/\">Animated 3D Helix<\/a><\/h3>\n<p>First one in the list is an incredible animation made by Marcofolio.net, using CSS3 3D transforms. The animation looks like magic itself, but you can actually learn to create a similar effect with the tutorial in the article!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg\" alt=\"animated 3d helix\" width=\"600\" height=\"410\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2011\/11\/07\/animated-buttons-with-css3\/\">Animated Buttons<\/a><\/h3>\n<p>A must-see for web designers, as the demo not only shows the possibilities of CSS3 animation but also provides very cool and practical button effects for inspiration!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-buttons.jpg\" alt=\"animated buttons\" width=\"600\" height=\"415\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2011\/10\/24\/creative-css3-animation-menus\/\">Animation Menus<\/a><\/h3>\n<p>Trying to spice up your animation menus to make them look really cool and creative? This demo is for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animation-menus.jpg\" alt=\"animation menus\" width=\"600\" height=\"441\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/294081-Player-Card-Kind-of-a-Big-Deal\">Big Deal<\/a><\/h3>\n<p>It\u2019s the smooth and nice animation that made this demo a big deal.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/big-deal.jpg\" alt=\"big deal\" width=\"600\" height=\"450\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.optimum7.com\/blog\/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html\">CSS3 Man<\/a><\/h3>\n<p>Look out, here comes the CSS3 man! A perfect example to showcase the true potential of CSS3 animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/css3-man.jpg\" alt=\"css3 man\" width=\"600\" height=\"459\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/3267935-Hello-Dribbble-Pure-CSS-Bouncing-Dribbble-Ball\">Dribbble Ball Bouncing<\/a><\/h3>\n<p>With the little use of graphic tricks comes to a nice and amusing CSS3 animation.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/dribbble-ball-bouncing.jpg\" alt=\"dribbble ball bouncing\" width=\"600\" height=\"265\"><\/figure>\n<h3><a rel=\"nofollow\" href=\"http:\/\/www.cssplay.co.uk\/menu\/css3-animation.html\">Frame by Frame Animation<\/a><\/h3>\n<p>Frame by frame animation with CSS3? No problem!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/frame-by-frame-animation.jpg\" alt=\"frame by frame animation\" width=\"600\" height=\"450\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.alessioatzeni.com\/blog\/css3-graph-animation\/\">Graph Animation<\/a><\/h3>\n<p>A simple but powerful animation for you to show\/explain the graph in your site, learn to make it!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/graph-animation.jpg\" alt=\"graph animation\" width=\"600\" height=\"450\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2011\/11\/02\/original-hover-effects-with-css3\/\">Hover Effects<\/a><\/h3>\n<p>The future of the hover effect comes with CSS3. Sleek and promising.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/hover-effects.jpg\" alt=\"hover effects\" width=\"600\" height=\"435\"><\/figure>\n<h3><a rel=\"nofollow\" href=\"http:\/\/www.cssplay.co.uk\/menu\/css3-zoom.html\">Infinite Zoom<\/a><\/h3>\n<p>Smooth animation; it\u2019s also a nice way to show off your portfolio. The total zoom for the 26 images is 67108864:1.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/infinite-zoom.jpg\" alt=\"infinite zoom\" width=\"600\" height=\"307\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/demos\/detail\/css-tricks\">Kinect and CSS3<\/a><\/h3>\n<p>\u201c14 body joints are tracked and converted into a short CSS animation using Xbox Kinect. The body data is brought into the browser where it is parsed and converted into CSS animations with animatable.com.\u201d<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/kinect-and-css3.jpg\" alt=\"kinect and css3\" width=\"600\" height=\"450\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/girliemac.com\/blog\/2009\/05\/03\/matrix-animation-with-webkit-css3\/\">Matrix<\/a><\/h3>\n<p>Want to be as cool as Matrix? With the CSS3, you\u2019re able to make it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/matrix.jpg\" alt=\"matrix\" width=\"600\" height=\"382\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webkit.org\/blog\/386\/3d-transforms\/\">Morphing Cubes<\/a><\/h3>\n<p>Experimental demo exploring the CSS3 using 3D transforms, animations and transitions. The interesting part here is you can still select the text on the elements, even when they are still rotating.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/morphing-cubes.jpg\" alt=\"morphing cubes\" width=\"600\" height=\"491\"><\/figure>\n<h3><a rel=\"nofollow\" href=\"http:\/\/neography.com\/journal\/our-solar-system-in-css3\/\">Our Solar System<\/a><\/h3>\n<p>You don\u2019t need expensive standalone software to help students explore solar systems anymore.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/our-solar-system.jpg\" alt=\"our solar system\" width=\"600\" height=\"596\"><\/figure>\n<h3><a rel=\"nofollow\" href=\"http:\/\/www.cssplay.co.uk\/menu\/css3-duff-roll.html\">Duff Roll<\/a><\/h3>\n<p>\u201cMmmmmm\u2026.Homer would love the never-ending supply of beer.\u201d<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/duff-roll.jpg\" alt=\"duff roll\" width=\"600\" height=\"372\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webkit.org\/blog\/386\/3d-transforms\/\">Poster Circle<\/a><\/h3>\n<p>A simple yet interesting example showing you how to use CSS transformation and animation to achieve an interesting effect.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/poster-circle.jpg\" alt=\"poster circle\" width=\"600\" height=\"522\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gesteves.com\/blog\/2009\/11\/29\/the-star-wars-opening-crawl-in-html-and-css\/\">Star Wars Crawl<\/a><\/h3>\n<p>Star Wars opening\u2019s crawl effect! Just as epic as CSS3.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/star-wars-crawl.jpg\" alt=\"star wars crawl\" width=\"600\" height=\"359\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/tympanus.net\/codrops\/2011\/11\/28\/typography-effects-with-css3-and-jquery\/\">Typography Effects<\/a><\/h3>\n<p>Besides button, menu, and hover effects, you can also achieve creative typography effects with CSS3. jQuery is also involved in this demo to style the letters of the words.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/typography-effects.jpg\" alt=\"typography effects\" width=\"600\" height=\"395\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/andrew.wang-hoyer.com\/\">Walking With Andrew Hoyer<\/a><\/h3>\n<p>Best of all, you can also learn to walk with Andrew Hoyer in the article!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/walking-with-andrew-hoyer.jpg\" alt=\"walking with andrew hoyer\" width=\"600\" height=\"377\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/is-real.net\/experiments\/css3\/wonder-webkit\/\">Wonder Webkit<\/a><\/h3>\n<p>A wonderful use of CSS3 3D transformations with JavaScript Matrix library. Sounds technical, but the outcome is rockingly cool.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/wonder-webkit.jpg\" alt=\"wonder webkit\" width=\"600\" height=\"473\"><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/andrew.wang-hoyer.com\/\">Zoetrope<\/a><\/h3>\n<p>What else you can\u2019t do with CSS3 when Zoetrope is possible with it?<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/zoetrope.jpg\" alt=\"zoetrope\" width=\"600\" height=\"450\"><\/figure>\n<h2>More:<\/h2>\n<p>Here are more related articles you might be interested in:<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" rel=\"noopener\">Beginner\u2019s Guide to CSS3<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-search-field\/\" rel=\"noopener\">Creating A Rocking CSS3 Search Box<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/building-html5-css-webpages\/\" rel=\"noopener\">Building HTML5\/CSS3 Webpages<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/breadcrumb-menu-css3\/\" rel=\"noopener\">Graceful Breadcrumb Navigation Menu in CSS3<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/\" rel=\"noopener\">Create An Ajax-based HTML5\/CSS3 Contact Form<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/coding-graphics-with-css3\/\" rel=\"noopener\">35 Graphics Built Purely With CSS3<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\" rel=\"noopener\">more..<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities are endless. One of the most interesting uses of CSS is to create animations. And this is what this post is all about. This post lists some of the&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,3498],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>30 Cool CSS Animations For Your Inspiration - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 Cool CSS Animations For Your Inspiration\" \/>\n<meta property=\"og:description\" content=\"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-20T10:01:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"30 Cool CSS Animations For Your Inspiration\",\"datePublished\":\"2022-08-20T10:01:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/\"},\"wordCount\":1152,\"commentCount\":30,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation\\\/animated-3d-helix.jpg\",\"keywords\":[\"CSS\",\"CSS Animation\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/\",\"name\":\"30 Cool CSS Animations For Your Inspiration - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation\\\/animated-3d-helix.jpg\",\"datePublished\":\"2022-08-20T10:01:12+00:00\",\"description\":\"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation\\\/animated-3d-helix.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation\\\/animated-3d-helix.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creative-css-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 Cool CSS Animations For Your Inspiration\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"30 Cool CSS Animations For Your Inspiration - Hongkiat","description":"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/","og_locale":"en_US","og_type":"article","og_title":"30 Cool CSS Animations For Your Inspiration","og_description":"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities","og_url":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2022-08-20T10:01:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"30 Cool CSS Animations For Your Inspiration","datePublished":"2022-08-20T10:01:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/"},"wordCount":1152,"commentCount":30,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg","keywords":["CSS","CSS Animation"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/","url":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/","name":"30 Cool CSS Animations For Your Inspiration - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg","datePublished":"2022-08-20T10:01:12+00:00","description":"CSS is one of the most versatile programming languages in popular use. From layouts and text effects to colour and size of your content, the possibilities","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation\/animated-3d-helix.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 Cool CSS Animations For Your Inspiration"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6aM","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23732"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23732\/revisions"}],"predecessor-version":[{"id":61768,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23732\/revisions\/61768"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23732"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}