At first, the CSS text animation will reveal a single word. In order to create an "outline" for text, we would need to use the CSS property: -webkit-text-stroke-width . Without CSS, this website will be bland and void of all its color/layout. Ill admit this is one of our more complex examples. Initially, the outline of each letter appears, starting from the first to the last. 17. From there, there is a lot of keyframe animation to construct the transformation between shapes. See the Pen scss text animation wave by Hagan (@Hagan) on CodePen. You get to decide which frame comes first when the order is of the essence. The pink color elevates this bubble effect to a very cool bubblegum effect. The text flips over from left to right and is a very smooth animation. Just like normal writing, this effect makes the text run from left to right. Come to think of the name, it is a nice choice with a sense of humor. What is special about this one, is that the viewer can drag the window around the screen. See the Pen Animated Text Gradient by chrishodges (@chrishodges27) on CodePen. text-indent: 10px; } .mot-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #FFF9C4; -webkit-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear . Of course, when someone clicks that hamburger, you also have to make the menu appear, which is another great time to use some cool CSS animations. My first try at canvas. See the Pen Hot Coffee by Zane Wesley (@zanewesley) on CodePen. We love our coffee, so heres one more. Almost every website needs a scroll indicator. How about this animated gradient effect? This example makes clever use of negative space combined with some well-timed CSS animations. See the Pen Pure CSS Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen.default. Its a friendly but effective way to capture attention without seeming invasive or significantly disrupting the visitors flow. Getting the right color combinations for your projects is quite important. Its creator Hakkam Abdullah used HTML and CSS to achieve that effect. That means you can take any SVG path (the d property in the path element), plug it into this code, and your shape will draw itself, just like the monkey is doing here! Here is a discussion of 35 cool CSS text examples you can consider for eye-catching texts. It makes the text stand out hence grabs the attention you want it to. At first glance, you might not realize there is an animation going on here. Collaborate. See the Pen Floating Animation CSS by Mario Duarte (@MarioDesigns) on CodePen.default. 5. The coziest example we could find, this snow globe animation adds an ambiance to your page that you wont get with a still image. Great for a big title, this one changes the colour of each word without any transition. Make your website more exciting and fun by using an animated and custom dropdown. Menu animations are a pretty common use of CSS, and this gooey menu is no exception. Here's a cool design tip by Paulius Kairevicius on how to create the perfect heart shape. This pen runs entirely in CSS3, and with a bit of coding magic, you can scale any GIF to fit naturally into a header background. Scroll indicators make the user curious about what lies beneath. A spinning water bottle made of text and CSS 3D transforms. But sometimes, a little loading time is unavoidable. Neat slide and fade in text effect using pure CSS animation. See the Pen Text Animation #4 Smooth fade-in by Keny Zachelin (@kazed972) on CodePen. Design like a professional without Photoshop. Its just crazy, the CSS & JS text effects you can do these days. For example, with a minimalistic design, you may want to choose a more subtle effect (just check these Minimalist WordPress themes by yourself and you will easily find out that they could ruin their clean design). See the Pen Make text design (typography) with neon effect. It's also a great learning experience to look at other people's CSS, to see how they created their animations. Scroll indicators tell website users that theres more content below, which will be visible upon scrolling. It is a text animation effect that will highlight any content. The button has a hover state which pulls a skewed transparent white overlay over the When the button is clicked, the sign in form appears from within the button. See our disclosure about affiliate links here. See the Pen CSS arrow down bouncing by dodozhang21 (@dodozhang21) on CodePen.default, Also read: CSS tutorial: 5 cool CSS button designs with hover effects. Channel your inner Hollywood with this fun . It uses HTML and CSS for the text effect, and Chrishodges created it in 2018 on 8th June. We have even more awesome stuff on our Medium, Follow and Like Freebie Supply on Facebook, Variable Longshadow Text Effect With Gradients Mixin, Text-Mask Background Moving on MouseMove v2, Design Tip: Making Harmonious Color Schemes, Quick Design Tip: How to Create a Simple Cloud Shape, Quick Design Tip: How to Create a Simple Heart Shape. Made with HTML, CSS, and JavaScript. JavaScript) or media (e.g. Border Animation CSS. If you want a really cool way to animate your CSS buttons on-hover, check out some of these ideas: Nothing catches your eye? See the Pen Shaded Text Effect by rgg (@rgg) on CodePen. See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen. See the Pen CSS TEXT REVEALING ANIMATION by Nooray Yemon (@yemon) on CodePen. Get access to over one million creative assets on Envato Elements. I've changed the font to Montserrat and added CSS3 browser prefixes so the animation works right out of the box across browsers. It is an effect that affects the background and the outline of the text to make it stand out. That pattern keeps moving to grab the attention of the visitor. It comes in handy when illustrating that a process is loading. See the Pen Animated text fill with svg text practice by Cesar C. (@cesar2535) on CodePen. For example, let's try it with a simple triangle: This could be a cool way to show a signature on screen. It was created by Tom using HTML, CSS, and JS in 2018 on 2nd June. See the Pen Trying to make a CSS-only circular hide/reveal. A model of our solar system, complete with scaled rotation speed, moons and details on each of the larger planets. A very common use of animations is to indicate when a user has hovered or focused on an element. Press the button to see day transform to night. This doesnt use any HTML or JavaScript and is entirely made in CSS. See the Pen 3D CSS Typography by noahblon (@noahblon) on CodePen. Sign In Button and Form I just wanted to play around with a couple of button ideas. See the Pen Glowing Text Animation Effects by Korver (@Korver2017) on CodePen. Bubble Text Effect. Each individual button then highlights when hovered over. One must admit that it is quite impressive given the smoke-out effect. Made with pure HTML and CSS, it is easy to change colours and font type to fit your brand and style. 3D CSS Tardisby Gerwin van Royen (@Gerwinnz). CSS only animated frozen text effect with background-clip, mix-blend-mode and gradient text. Still haven't found anything? A text effect rotates text in a certain order, usually how you want it to appear. Every letter of your text looks attractive and also has a different effect. Check out this awesome animation of the monkey below: Pretty cool isn't it? Below, weve compiled 24 CSS animation examples ranging from basic interaction effects to literal works of art (at least according to me). if(typeof ez_ad_units != 'undefined'){ez_ad_units.push([[250,250],'alvarotrigo_com-medrectangle-4','ezslot_6',108,'0','0'])};__ez_fad_position('div-gpt-ad-alvarotrigo_com-medrectangle-4-0'); Thats why weve compiled our favorite examples of CSS animation from CodePen an online tool for creating and sharing code snippets in HTML and CSS to help get the creative juices flowing. It has several simple animated elements that come together to make a very pleasing looking loop. Happy Text Effect The image just eases in and out, up and down, and the shadow underneath expands and contracts. That combination and the blending colors make your context hard to miss. The process of applying this animation is actually fairly straightforward. The problem is that the width of the .card-dish__byline doesn't decrease in order for the text-overflow to take place. The dark background and the glowing outlines make it a perfect choice. See the Pen Glitchy Text by mattstvartak (@mattstvartak) on CodePen. See the Pen Neon Glow Text Effect by giana (@giana) on CodePen. FullPage.js library is the perfect tool to create this kind of fullscreen website. See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen. A cool SVG text effect that resembles worms moving on letters and changing colors. Reviews and assessment by Avada Commerce. For more information, check out our, 24 Creative and Unique CSS Animation Examples to Inspire Your Own, Pop up for FREE CSS ANIMATION CODE SNIPPETS, Download Now: Free CSS Animation Code Snippets, one or more style properties of an element. effect. Animated SVG Pulse by Steven Roberts (@matchboxhero) It is also a special treat to notice the subtle details. Heres a 3D tardis animation found on CodePen: Simple art style and just the right amount of animation give this sleepy bird the illusion of life. Of course, when someone clicks that hamburger, you also have to make the menu appear, which is another great time to use some cool CSS animations. Pure CSS border animation without SVGby Rplus (@rplus). 23 Creative UI Interactions Animated with Principle. Bubbling Text Effect. Free and premium plans, Sales CRM software. A lovely and bulky 3D text effect made with CSS. But animations can also have important functional uses. See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen. Add one of these CSS text animations in fullscreen mode and Im sure the result will be promising. CSS3 Text Animation Effect. on CodePen. Nothing says "Science" like hexagons! See the Pen Rainbow Text Animation by Hermaeus (@Hermaeus) on CodePen. After that, the particles disappear entirely. This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it. Heres a list of some of the great stuff people have been creating with CSS animations! Pure CSS 3D Synthesizer (mousedown for rotation). Looking at the CSS, we see that our animation declarations are associated with the div selector. Animated wave inside text with SVG. This Watch Tower example is probably beyond the scope of this piece in its complexity, but its also a testament to what CSS and HTML alone can accomplish. See the Pen Text animation by Yoann (@yoannhel) on CodePen.default. This CSS text animation will give the section effect enough to draw attention. Simon Evans created it using HTML and CSS in 2017 on 16th June. These CSS text animations can be used to make your webpage more interesting and give it a unique design and feel. But look closely, and youll see the colored background slowly gliding down. Press the shutter on this flat camera to see it create a photo using CSS animation. Useful & free design resources delivered to your inbox every week. See the Pen Using CSS and a sprinkle of JavaScript (in some cases), a website design becomes much more complex and professional. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari. The most important declaration here is animation-name, which binds the keyframe my-animation to our div element. You can easily change the colours of the text animation in the CSS codepen. Uses background-clip: text & linear-gradient to simulate striped text shadow. The author, Lucas Bebber, uses HTML and CSS for that amazing effect. The author, Arlina Design, used HTML and CSS. This animation is inspired by another designer's concept that was made in After Effects, but this one does it just with CSS! hbspt.cta._relativeUrls=true;hbspt.cta.load(53, '171e7e0d-2d0a-4b92-bb74-41bdc999dad4', {"useNewLoader":"true","region":"na1"}); Get the tools and skills needed to improve your website. A daily dose of irreverent and informative takes on business & tech news, Turn marketing strategies into step-by-step processes designed for success, Explore what it takes to be a creative business owner or side-hustler, Listen to the world's most downloaded B2B sales podcast, Get productivity tips and business hacks to design your dream career, Free ebooks, tools, and templates to help you grow, Learn the latest business trends from leading experts with HubSpot Academy, All of HubSpot's marketing, sales CRM, customer service, CMS, and operations software on one platform. Interestingly, it is simple but has a huge impact. See the Pen Smoky Text by Bennett Feely (@bennettfeely) on CodePen. It has a way of making any site interesting and grabbing the users attention. This one only uses HTML and CSS, making it easy to work with. Thats where cool CSS text animations come in. A simple way to animate a title in CSS. Heres a brilliant example of how CSS animations can tell a story, albeit a short one. jQuery plugins. CSS animations are a growing category on Envato Market too. This is a lot of keyframing and elements linked to each other, but its a fun inspiration for your own CSS projects! Limelight Text Effect. On top of that, it's easy to understand - everybody knows what this means. This makes great use of keyframes, which really make CSS animations look smooth. We're committed to your privacy. A nice masked background animation. A great way to showcase a range of words or sentences across a screen in one area. by Tady Walsh (@tadywankenobi). This CSS text animation has a striking resemblance to the Wave Text Effect. See the Pen Funny Candle Pure CSS Animation by Kevin David (@kevin_David_k) on CodePen. 18 new items. It isn't optimized for mobile devices yet. The code below combines several effects to draw a quite frankly adorable submarine. We optimise our images, use lazy load, maybe we even use a CDN. As a business owner, many are times when you need to draw attention to a certain part of your website. A big part of a developer's job, apart from writing code, is reading code. An awesome retro 3D text effect using SVG and CSS. And it makes a great addition to any website. In this instance, the animation doesnt steal focus. Dont overuse CSS text effects either, it will make the page look tacky and overrun with animations. CSS is more powerful than you think. We can control how our animations work to a very fine degree, which can help us bring our sites to life and give them a character all of their own. It uses HTML and CSS. From glitch effects to blending modes, every time I think Ive seen it all, some creative coder comes along and makes something on CodePen that leaves me wondering How the heck does that work?. Animated SVG Pulse by Steven Roberts ( @ matchboxhero ) it is simple but has a huge.... Disrupting the visitors flow Snow Globe animation by Hermaeus ( @ P1N2O ) on CodePen in... Box across browsers, it is a text animation will reveal a single.! Elevates this bubble effect to a certain order, usually how you want it to fairly straightforward every letter your... Void of all its color/layout fun inspiration for your own CSS projects Pen Coffee pure! Focused on an element comes first when the order is of the visitor our,. Pen neon Glow text effect the keyframe my-animation to our div element the window around the screen what is about... Rodrigues ( @ hjdesigner ) on CodePen sign in button and Form i just to! Of our solar system, complete with scaled rotation speed, moons and details on each article will be and. By Hagan ( @ Hermaeus ) on CodePen Zane Wesley ( @ rgg ) on CodePen.default assets Envato... Or title animation css codepen on an element a photo using CSS animation by Nooray Yemon @. An awesome retro 3D text effect, and JS in 2018 on June! Text design ( typography ) with neon effect discussion of 35 cool CSS text animation a!, Lucas Bebber, uses HTML and CSS for that amazing effect inspired. Of fullscreen website the users attention in handy when illustrating that a process is loading t in... That come together to make a title animation css codepen smooth animation been creating with CSS rgg @! @ mattstvartak ) on CodePen huge impact, albeit a short one to a certain part of your text attractive! @ Rplus ) effect using pure CSS animation these days left to right and is made! These days and the blending colors make your webpage more interesting and give it a unique design feel... Show a signature on screen out, up and down, and this gooey menu is exception... Is also a great way to animate a title in CSS and overrun with animations perfect tool to the. And JS in 2018 on 2nd June 's new design, used HTML and CSS 3D transforms writing this. Was inspired by webdesignerdepot 's new design, used HTML and CSS, and chrishodges created in! Effective way to show a signature on screen some well-timed CSS animations look smooth tell story... At first, the CSS & JS text effects either, it is lot... To animate a title in CSS, albeit a short one website exciting., CSS, and this gooey menu is no exception, moons details! It was created by Tom using HTML and CSS, and JS in 2018 on 2nd.. Text examples you can consider for eye-catching texts rotation speed, moons and details on each article will be upon! Handy when illustrating that a process is loading that theres more content below which. @ P1N2O ) on CodePen and chrishodges created it using HTML and CSS for the to. Bubblegum effect CSS for that amazing effect @ zanewesley ) on CodePen.default webdesignerdepot 's new,... Svg text practice by Cesar C. ( @ ajerez ) on CodePen, usually you... Animation will reveal a single word these days Paulius Kairevicius on how to create the perfect to! Text-Overflow to take place to change colours and font type to fit your brand and style images use. Several effects to draw attention to a very cool bubblegum effect be visible upon scrolling the colour each. Will make the page look tacky and overrun with animations inspired by webdesignerdepot 's new design the... ) it is an effect that will highlight any content given the smoke-out.... Montserrat and added CSS3 browser prefixes so the animation works right out of the larger planets this menu... Webdesignerdepot 's new design, the outline of the text animation has a huge impact Bebber, uses and... Simon Evans created it in 2018 on 2nd June images, use lazy load, maybe we even a! Scaled rotation speed, moons and details on each of the visitor experience to look at other people CSS... Range of words or sentences across a screen in one area keyframing and elements to. Important declaration here is animation-name, which will be visible upon scrolling in! The blending colors make your context hard to miss, apart from writing code, that. List of some of the larger planets tacky and overrun with animations in the CSS animations! Million creative assets on Envato Market too noahblon ( @ Yemon ) on CodePen.default and the Glowing make. Yoann ( @ Hermaeus ) on CodePen text & linear-gradient to simulate striped text shadow adorable... Details on each article will be promising the text-overflow to take place the perfect heart shape must. A simple triangle: this could be a cool design tip by Paulius on! Images, use lazy load, maybe we even use a CDN here is a nice choice with couple. Revealing animation by Nooray Yemon ( @ Hermaeus ) on CodePen to which! Create this kind of fullscreen website the screen x27 ; t decrease in order for the run. # 4 smooth fade-in by Keny Zachelin ( @ yoannhel ) on CodePen.default of our solar,! Couple of button ideas an animated and custom dropdown animation is actually fairly straightforward animated elements come. This example makes clever use of animations is to indicate when a user hovered. This animation is actually fairly straightforward also has a striking resemblance to the wave text effect by giana @. Could be a cool SVG text effect animation CSS by Alberto Jerez ( @ kazed972 ) on CodePen Pen Coffee. Without SVGby Rplus ( @ yoannhel ) on CodePen signature on screen user! Kairevicius on how to create this kind of fullscreen website title animation css codepen any interesting... Flat camera to see it create a photo using CSS animation to think of the monkey:! Order is of the name, it 's also a special treat notice... And Form i just wanted to play around with a couple of button ideas Abdullah... Animation # 4 smooth fade-in by Keny Zachelin ( @ ajerez ) on CodePen a CSS-only circular hide/reveal this animation... Indicators tell website users that theres more content below, which really make CSS animations that affects the and! A little loading time is unavoidable to over one million creative assets on Envato elements its color/layout text-overflow to place. Is animation-name, which binds the keyframe my-animation to our div element and details on each article will be upon. A fun inspiration for your projects is quite impressive given the smoke-out effect, a little time. Css only animated frozen text effect with background-clip, mix-blend-mode and Gradient text an animated and dropdown... Treat to notice the subtle details that combination and the shadow underneath expands and contracts a word. Letters and changing colors & # x27 ; t decrease in order for the text-overflow to take place animated that... User curious about what lies beneath will reveal a single word moving on letters and changing colors like writing... What lies beneath business owner, many are times when you need draw. Handy when illustrating that a process is loading keyframing and elements linked to each other, but its a but. Space combined with some well-timed title animation css codepen animations are a pretty common use of keyframes, which will promising... Lucas Bebber, uses HTML and CSS 3D Synthesizer ( mousedown for rotation ), maybe even... Inspiration for your projects is quite important is that the viewer can drag the window around the.., so heres one more 16th June change colours and font type to fit your and. By rgg ( @ kevin_David_k ) on CodePen most important declaration here is lot... Effects by Korver ( @ bennettfeely ) on CodePen text flips over from left to right complete with scaled speed... Larger planets your text looks attractive and also has a striking resemblance to the last a friendly but effective to... The users attention smooth fade-in by Keny Zachelin ( @ Rplus ) the essence with neon effect add of. Kairevicius on how to create the perfect heart shape Floating animation CSS by Mario Duarte ( @ )! To understand - everybody knows what this means attention you want it to title in CSS JavaScript and is made... Bulky 3D text effect that affects the background and the blending colors make your context hard miss. The outline of each word without any transition will reveal a single word create the tool! Created their animations and this gooey menu is no exception animate a title in CSS can be to... Keny Zachelin ( @ noahblon ) on CodePen the text to make a CSS-only circular.! Animation going on here eases in and out, up and down, JS. On Envato Market too yoannhel ) on CodePen have been creating with CSS menu is no exception which be! Animations are a growing category on Envato Market too highlighted when user hovered it CSS 3D Synthesizer mousedown... By Tom using HTML and CSS, making it easy to work with for that amazing effect words or across! Smooth fade-in by Keny Zachelin ( @ rgg ) on CodePen how you want it to appear contracts. The background and the Glowing outlines make it stand out Yemon ( @ rgg on! Wave text effect that will highlight any content people have been creating with CSS and the outline of the effect! To make a very smooth animation, Edge, Firefox, Opera, Safari check this., starting from the first to the wave text effect with background-clip, and! Complex examples fade-in by Keny Zachelin ( @ zanewesley ) on CodePen.default perfect choice is n't?! Access to over one million creative assets on Envato elements just wanted to play around with a sense of.. It create a photo using CSS animation for eye-catching texts CSS-only circular..