Text animations

1. Simple text animation

CodePen Embed - Simple CSS text animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Simple CSS text animation

Make

wOrK

lifeStyle

Everything

AweSoMe!

a css3 animation demo

This Pen is owned by Nooray Yemon on CodePen.

See more by @yemon on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Simple CSS text animation

Loading interactive CodePen...

Open on CodePen

The simple text animation by Nooray Yemon creates a vertical text-flipping effect inside the #flip container, making different words — work, lifestyle, and everything — appear in a sequential and infinite loop. The animation is controlled by the @keyframes show ( docs), which adjusts the margin-top of the child div elements, causing them to slide into view.

2. CSS text animation

CodePen Embed - Pure CSS Text animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

340

Live

xxxxxxxxxx

Pure CSS Text animation

mamunkhandakerRepeat Animation

css3animationsRepeat Animation

This Pen is owned by Mamun Khandaker on CodePen.

See more by @kh-mamun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

Pure CSS Text animation

Loading interactive CodePen...

Open on CodePen

The CSS text animation by Mamun Khandaker creates a series of animations — rotation, scaling, bouncing, sliding in, and various combinations — for different groups of text. The animations are powered by @keyframes declarations that control transformations like translate ( docs), scale ( docs), and opacity ( docs).

While this animation doesn’t require JavaScript to work, JavaScript is used to repeat the animations when the “Repeat Animation” button is clicked.

3. Hover effect for headers

CodePen Embed - Hover Effect for Headers

Live

xxxxxxxxxx

Live

xxxxxxxxxx

382

Live

xxxxxxxxxx

Hover Effect for Headers

Desert

F

O

R

E

S

T

C

A

N

Y

O

N

Glacier

MOUNTAINS

OCEAN

fries

F A L L S

This Pen is owned by Olivia Ng on CodePen.

See more by @oliviale on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Hover Effect for Headers

Loading interactive CodePen...

Open on CodePen

The hover effect for headers by Olivia Ng creates a visually engaging webpage with sections representing different natural elements like deserts, forests, canyons, glaciers, mountains, oceans, and more. Each "element" has a unique background image, interactive hover effects, and text animations to enhance user experience.

4. CSS party5.

CodePen Embed - CSS Party

Live

xxxxxxxxxx

Live

xxxxxxxxxx

125

Live

xxxxxxxxxx

CSS Party

2024

The year of CSS

PartyChill

This Pen is owned by David East on CodePen.

See more by @davideast on CodePen

External CSS

https://use.typekit.net/htw6kjt.css

External JavaScript

https://unpkg.com/splitting/dist/splitting.min.js

CSS Party

Loading interactive CodePen...

Open on CodePen

The CSS party animation by David East puts control in your hands by providing a slider for controlling the intensity and speed of the text animation.

This text animation relies on @keyframes breath, which adds a text shadow to the text and makes it scale up and down, and some JavaScript code that handles the slider’s input value and uses CSS custom properties to control the animation’s timing.

See more creative text animations!

Want to see more examples of CSS text animations? Then, check out our dedicated article that covers 40 text effects.

Hover animations

5. Animated CSS mail button

CodePen Embed - Animated CSS Mail Button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

166

Animated CSS Mail Button

This Pen is owned by Jake Giles-Phillips on CodePen.

See more by @jakegilesphillips on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Animated CSS Mail Button

Loading interactive CodePen...

Open on CodePen

The animated CSS main button by Jake Giles-Phillips creates an envelope animation where the envelope opens and reveals its content on hover. It relies on various CSS transforms to work.

6. Sparkly shiny text

CodePen Embed - Sparkly Shiny Text ✨

Live

xxxxxxxxxx

Live

xxxxxxxxxx

164

Sparkly Shiny Text ✨ Click!Click!

This Pen is owned by Jhey on CodePen.

See more by @jh3y on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.

Sparkly Shiny Text ✨

Loading interactive CodePen...

Open on CodePen

The sparkly shiny text animation by Jhey creates an interactive button that features multiple black sparkle SVGs that animate on hover. The text of the button has a layered effect that creates a text-shadow ( docs) for a 3D-like appearance.

7. Glowing dot effect

CodePen Embed - Full CSS growing dot effect

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Full CSS growing dot effect

This Pen is owned by Vincent Durand on CodePen.

See more by @onediv on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Full CSS growing dot effect

Loading interactive CodePen...

Open on CodePen

The glowing dot effect by Vincent Durand creates a card component with a grid of tiny dots as its background. The dots expand as users hover over specific sections of the card, and this makes for an interesting effect.

8. Glide to reveal

CodePen Embed - Glide To Reveal with CSS :has()

Live

xxxxxxxxxx

Live

xxxxxxxxxx

120

Glide To Reveal with CSS :has()

Glide To Reveal Secret Code

This Pen is owned by Jhey on CodePen.

See more by @jh3y on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Glide To Reveal with CSS :has()

Loading interactive CodePen...

Open on CodePen

The glide to reveal hover effect by Jhey features six digits that are blurred initially but scale up and become clear on hover or focus.

9. OS dock

CodePen Embed - CSS OS Dock [CSS :has(), lerp custom props]

Live

xxxxxxxxxx

Live

xxxxxxxxxx

194

Live

xxxxxxxxxx

CSS OS Dock [CSS :has(), lerp custom props]

:hover

This browser is not supported... yet. :has is currently supported in Chrome v105+, Chrome Canary with the "Experimental Web Platform Features" flag enabled or Safari.

This browser is not supported... yet. Popover API is currently supported in Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. CSS Trigonometry is currently supported in Safari, Firefox, and Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. Some Houdini features are currently supported in Chromium based browsers. Check ishoudinireadyyet.com.

This browser is not supported... yet. object-view-box is currently supported in Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. @scroll-timeline is currently supported in Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. The "Shared Element Transitions" API is currently supported in Chrome Canary with the "Experimental Web Platform Features" and "Document Transition" flags enabled.

This browser is not supported... yet. CSS anchoring can be experimented with in Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. SelectMenu can be experimented with in Chrome Canary with the "Experimental Web Platform Features" flag enabled.

This browser is not supported... yet. initial-letter can be used in Safari or Chrome Beta.

This Pen is owned by Jhey on CodePen.

See more by @jh3y on CodePen

External CSS

External JavaScript

https://codepen.io/jh3y/pen/zYRjgjW.js

CSS OS Dock [CSS :has(), lerp custom props]

Loading interactive CodePen...

Open on CodePen

Check out more CSS hover effects!

Explore our dedicated article to see more CSS hover effects.

Button animations

10. Keyframe tricks

CodePen Embed - Single Keyframe Tricks

Live

xxxxxxxxxx

184

Live

xxxxxxxxxx

236

Live

xxxxxxxxxx

Single Keyframe Tricks

Shakes

Rejecti{ng

CLICK ME

Pulse

Partying

CLICK ME

Glitch

Hacking

CLICK ME

Turn

Flipping

CLICK ME

Fill

Click me

Sheen

Shining

Click me

Emphasize

Glowing

Click me

Blur

Censoring

CLICK ME

Tony Hawk

900-ing

CLICK ME

Shakes

Rejecting

CLICK ME

Pulse

Partying

CLICK ME

Glitch

Hacking

CLICK ME

Turn

Flipping

CLICK ME

Fill

Click me

Sheen

Shining

Click me

Emphasize

Glowing

Click me

Blur

Censoring

CLICK ME

Tony Hawk

900-ing

CLICK ME

This Pen is owned by David East on CodePen.

See more by @davideast on CodePen

External CSS

External JavaScript

This Pen doesn't use any external JavaScript resources.

Single Keyframe Tricks

Loading interactive CodePen...

Open on CodePen

The keyframe tricks effect by David East showcases various types of animations — like shake, pulse, glitch, flip, fill — applied to buttons using CSS keyframes. The JavaScript code in this Codepen is used to stop and start the animation.

11. CSS fizzy button

CodePen Embed - CSS Fizzy Button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

283

CSS Fizzy Button

Fizzy CSS Button

With super fizzy particle action

More Codepen shenanigans Downloads

This Pen is owned by Jamie Coulter on CodePen.

See more by @jcoulterdesign on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

CSS Fizzy Button

Loading interactive CodePen...

Open on CodePen

The CSS fizzy button by Jamie Coulter creates an animated button effect where bubble particles emanate from the text button while a right arrow slides into view and the background color changes.

12. Fun 3D button

CodePen Embed - Fun 3D button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

244

Fun 3D buttonPlay

Made by @LukyVj

Inspired by https://twitter.com/aleksliving/status/1635306125393551360

d to debug

p Presentation

This Pen is owned by LukyVJ on CodePen.

See more by @LukyVj on CodePen

External CSS

https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.css

External JavaScript

https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.js

Fun 3D button

Loading interactive CodePen...

Open on CodePen

The fun 3D button by LukyVJ creates a button that, when hovered over, scales up while heart-shaped elements of different sizes scale into view. It also provides controls for debugging the animation and changing the body’s background color.

Take your 3D animations to the next level with GSAP and Three.js!

Learn to animate 3D models with GSAP and Three.js in our interactive course! In this creative course, we guide you through building a scroll-animated 3D landing page using Next.js 14, GSAP, Prismic, Three.js, Tailwind, and TypeScript.

View Course

13. Rainbow gradient button

CodePen Embed - Lil rainbow gradient button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

256

Lil rainbow gradient button Join today!

Made by @LukyVj

This Pen is owned by LukyVJ on CodePen.

See more by @LukyVj on CodePen

External CSS

https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

Lil rainbow gradient button

Loading interactive CodePen...

Open on CodePen

The rainbow gradient button by LukyVJ creates a button that scales up, shifts, and shuffles through various colors on hover. It relies on several colors, CSS variables, scale, translateY, and linear-gradient ( docs) to work.

14. Storm button

CodePen Embed - Andreas Storm button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

117

Andreas Storm button

Button

This Pen is owned by jwktje on CodePen.

See more by @jwktje on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Andreas Storm button

Loading interactive CodePen...

Open on CodePen

The storm button by jwktje uses HTML, CSS, and SVG to create a voltage button with a glowing effect. The SVG includes a filter named “glow” that gives the graphic a glowing, wavy look. The effect relies on three keyframes to work: spark-1, spark-2, and fly-up.

Click animations

15. Toggle switch with a hole

CodePen Embed - Toggle Switch with a Hole Handle

Live

xxxxxxxxxx

Live

xxxxxxxxxx

167

Live

xxxxxxxxxx

Toggle Switch with a Hole Handle

This Pen is owned by Jon Kantner on CodePen.

See more by @jkantner on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Toggle Switch with a Hole Handle

Loading interactive CodePen...

Open on CodePen

Jon Kantner created a toggle switch with a hole that, when clicked, the hole extends and moves to the opposite end along the x-axis. It’s a solid implementation of the basic toggle switch animation we see around.

16. Pure CSS drawer

CodePen Embed - Pure CSS Drawers ʕノ•ᴥ•ʔノ︵ ┻━┻

Live

xxxxxxxxxx

Live

xxxxxxxxxx

274

Live

xxxxxxxxxx

Pure CSS Drawers ʕノ•ᴥ•ʔノ︵ ┻━┻

CSS

Awesome

This Pen is owned by Jhey on CodePen.

See more by @jh3y on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Pure CSS Drawers

Loading interactive CodePen...

Open on CodePen

The pure CSS drawer by Jhey creates a 3D drawer with panels that open when clicked. The third drawer has a wavy text animation inside it, further enhancing the awesomeness of this animation.

17. Copy button click effect

CodePen Embed - Copy Button Click Effect

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Copy Button Click Effect

GroupGroup

long press me

This Pen is owned by Arjun Ace on CodePen.

See more by @arjunace on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Copy Button Click Effect

Loading interactive CodePen...

Open on CodePen

The copy button click effect by Arjun Ace uses two SVG elements to create its animation. When clicked, a copy-like motion occurs. This effect relies on two keyframe definitions: press to give the card a pressed-in feel when clicked and bounce to animate the SVG copy icon out of view.

18. Beveled buttons

CodePen Embed - SCSS Beveled Buttons

Live

xxxxxxxxxx

Live

xxxxxxxxxx

127

SCSS Beveled ButtonsGet Bevel’dBevel Up

This Pen is owned by Brandon McConnell on CodePen.

See more by @brandonmcconnell on CodePen

External CSS

https://fonts.googleapis.com/css?family=Chewy|Didact+Gothic

External JavaScript

This Pen doesn't use any external JavaScript resources.

SCSS Beveled Buttons

Loading interactive CodePen...

Open on CodePen

The beveled buttons animation by Brandon McConnell creates a button that transforms from an envelope-like button to a ghost button when clicked. At the same time, the “Bevel Up” text moves from its initial position above the button to the back.

19. Biometrics button

CodePen Embed - Black Biometirics Button

Live

xxxxxxxxxx

Live

xxxxxxxxxx

117

Live

xxxxxxxxxx

Black Biometirics Button

This Pen is owned by Mikael Ainalem on CodePen.

See more by @ainalem on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Black Biometirics Button

Loading interactive CodePen...

Open on CodePen

The biometrics button by Mikael Ainalem creates an interactive login button with a fingerprint animation. When the button is clicked, it transforms from displaying the text "LOGIN," to showing an SVG fingerprint animation that traces different curved path lines to mimic a fingerprint scan.

Among other CSS features, the animation relies on stroke-dasharray and stroke-dashoffset to manipulate the SVG’s path and give the illusion of drawing fingerprint lines. It also uses a text keyframe to manage the text’s visibility and the Ok keyframe to control the SVG animation.

Loading animations

20. Kinetic CSS loaders

CodePen Embed - Kinetic CSS loaders

Live

xxxxxxxxxx

Live

xxxxxxxxxx

525

Kinetic CSS loaders

This Pen is owned by Jenning on CodePen.

See more by @jenning on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Kinetic CSS loaders

Loading interactive CodePen...

Open on CodePen

The kinetic CSS loaders by Jenning use a combination of keyframes, pseudo-elements, and CSS properties to create loading elements. You can use these loaders to add visual feedback when processes are running in the background of your app.

21. Newton’s cradle

CodePen Embed - Newton's cradle using only CSS

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Newton's cradle using only CSS

This Pen is owned by Arushi Bajpai on CodePen.

See more by @arushi011 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Newton's cradle using only CSS

Loading interactive CodePen...

Open on CodePen

Newton’s cradle animation by Arushi Bajpai creates a pendulum swing that continually sways from one end to the other. Each .ball represents a pendulum bob, with a ::before pseudo-element styled to resemble the bob’s strange. The .first and .last balls are animated with firstball and lastball keyframes to mimic the natural swinging motion of a pendulum. The transform-origin ( docs) ensures the balls rotate from the top point of their pseudo-element strings, creating a realistic pivot.

22. Glowing loader ring

CodePen Embed - Glowing Loader Ring Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Glowing Loader Ring Animation

This Pen is owned by Ekta maurya on CodePen.

See more by @Curlmuhi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Glowing Loader Ring Animation

Loading interactive CodePen...

Open on CodePen

The glowing loader ring animation by Ekta maurya creates a creates a glowing, spinning ring effect. The .ring element forms the circular base while its :before pseudo-element imitates the yellow border. The animateC keyframe handles the yellow rim’s motion, while the animate keyframe handles the yellow dot’s motion.

23. Making-pancake loader

CodePen Embed - Never-ending box

Live

xxxxxxxxxx

Live

xxxxxxxxxx

Never-ending box

This Pen is owned by Pawel on CodePen.

See more by @pawelqcm on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Never-ending box

Loading interactive CodePen...

Open on CodePen

The making-pancake loader by Pawel creates a playful animation of a flipping pancake in a pan, complete with bubbling effects to simulate cooking. The pancake-flipping effect is achieved through multiple keyframe animations:

jump: Handles the movement of the pancake
flip: Animates the pan’s flipping motion
switchSide: Rotates the pan around its Y-axis
fly: Simulates the pancake rising to its peak, rotating mid-air, and returning to its starting position
bubble: Controls the size, position, and fading of the bubbles as they rise from the pan
pulse: Adds a pulsating effect to the "Cooking in progress..." text by gradually scaling and fading the text in and out

24. Speedy truck

CodePen Embed - Speedy truck

Live

xxxxxxxxxx

Live

xxxxxxxxxx

150

Speedy truck

This Pen is owned by Tippy Fodder on CodePen.

See more by @tippyfodder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Speedy truck

Loading interactive CodePen...

Open on CodePen

The speedy truck animation by Tippy fodder creates a looping animation of a scenic background with a truck driving through a landscape of mountains, hills, trees, and rocks. This animation relies on the following keyframes:

tree: Animates the trees to move from the right side of the screen (1350px) to the left side (-50px)
tree2: Similar to tree, but starts at 650px, creating variation in the scrolling speed and position of the second tree

tree3: Another variation for the third tree, starting at 2750px
rock: Animates rocks from right to left
truck: Simulates the truck's motion by slightly bouncing it up and down to mimic driving over uneven terrain
wind: Animates the "wind" effect on the truck's visual elements by slightly moving them up and down
mtn: Moves the mountain backdrop horizontally from its initial position to create the illusion of distant background movement
hill: Similar to mtn, moves the hill horizontally to simulate scrolling terrain closer to the foreground

Menu animations

25. Dropdown menus

CodePen Embed - Dropdown Menus

Live

xxxxxxxxxx

Live

xxxxxxxxxx

192

Dropdown Menus

This Pen is owned by Kevin on CodePen.

See more by @kkrueger on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Dropdown Menus

Loading interactive CodePen...

Open on CodePen

Kevin’s dropdown menus effect creates a dropdown menu with four categories: animals, names, things, and movies. Each category is styled as a button with hover effects that reveal a list of items.

26. Swanky CSS Drop Down menu

CodePen Embed - Swanky Pure CSS Drop Down Menu V2.0

Live

xxxxxxxxxx

101

Live

xxxxxxxxxx

313

Live

xxxxxxxxxx

Swanky Pure CSS Drop Down Menu V2.0

Swanky Lil Drop Down Menu V2.0

Pure CSS Drop down menu. Nice little addition to any non-javascript user interface. Uses the labels for trick to toggle animations.

\ Twitter](https://www.twitter.com/jamiecoulter89)

\ Codepen](https://www.codepen.io/jcoulterdesign/)

Dashboard

Tools
Reports
Analytics
Code Blocks

Sales

New Sales
Expired Sales
Sales Reports
Deliveries

Messages

Inbox
Outbox
Sent
Archived

Users

New User
User Groups
Permissions
Passwords

Settings

Databases
Design
Change User
Log Out

Made with by Jcoulterdesign

This Pen is owned by Jamie Coulter on CodePen.

See more by @jcoulterdesign on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Swanky Pure CSS Drop Down Menu V2.0

Loading interactive CodePen...

Open on CodePen

The swanky CSS Drop Down menu by Jamie Coulter provides a combination of click and hover animations that will make any menu stand out. When the menu links are clicked, the sub-menus stagger into view one after the other. The social media buttons aren’t left out, as a slide animation is applied to its content on hover.

27. Pure CSS menu

Pure CSS menu

This CodePen URL could not be embedded automatically.

Open on CodePen

The pure CSS menu by Antonija Šimić creates a fullscreen menu design that features a toggle button that:

Transforms into an animated "X" when clicked
Opens two animated sections: a left panel with a call-to-action (CTA) button and a right panel with navigational links.

The left panel slides down vertically, while the right panel slides in horizontally, creating a dynamic opening effect. The menu links include a hover animation where an underline shifts from left to right for enhanced interactivity.

28. 💪 CSS menu feat. emoji

CodePen Embed - 💪 CSS menu feat. emoji

Live

xxxxxxxxxx

Live

xxxxxxxxxx

208

💪 CSS menu feat. emoji

This Pen is owned by Piotr Galor on CodePen.

See more by @pgalor on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

💪 CSS menu feat. emoji

Loading interactive CodePen...

Open on CodePen

💪 CSS menu feat. emoji by Piotr Galor defines a navigation menu with skewered sub-menus that appear when hovered over. It is a simple but catchy menu animation.

29. Pure CSS menu animation

CodePen Embed - Pure CSS Menu Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

183

Pure CSS Menu Animation

Explore

Connect

Interact

This Pen is owned by Charlie Marcotte on CodePen.

See more by @FUGU22 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Pure CSS Menu Animation

Loading interactive CodePen...

Open on CodePen

The pure CSS menu animation by Charlie Marcotte creates a menu with a white bottom panel containing three hoverable headings — Explore, Connect, and Interact. This effect also includes a pulsating blob-like element that shifts position based on which heading is being hovered.

First time here? Discover what Prismic can do!

Build locally with your preferred tech stack and spend less time fixing, and more time shipping.

Get started now

Card animations

30. 3D cards flip

CodePen Embed - 3D Cards Flip

Live

xxxxxxxxxx

Live

xxxxxxxxxx

120

3D Cards Flip

This Pen is owned by Julien Sulpis on CodePen.

See more by @jsulpis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

3D Cards Flip

Loading interactive CodePen...

Open on CodePen

The 3D cards flip effect by Julien Sulpis creates an interactive 3D card-flipping animation. The .board contains three .card elements, each of which can flip between its front and back faces when clicked. As the cards flip, they stack on top of each other and, when clicked again, revert back to their original state and position.

31. Card hover effect

CodePen Embed - Card hover effect

Live

xxxxxxxxxx

103

Live

xxxxxxxxxx

543

Live

xxxxxxxxxx

Card hover effect

Products

Standard chunk of Lorem Ipsum used since the 1500s is showed below for those interested.

External CSS

https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

Card hover effect

Loading interactive CodePen...

Open on CodePen

The card hover effect by Aaron Iker creates cards that, when hovered on, receive a shiny tile effect. Among others, it relies on CSS features like mask-image ( docs), backdrop-filter ( docs), conic-gradient ( docs), radial-gradient ( docs), and @keyframes tile, which animates the opacity of the tiles on hover.

32. Animated info card

CodePen Embed - Pure CSS Responsive animated info card

Live

xxxxxxxxxx

Live

xxxxxxxxxx

250

Pure CSS Responsive animated info card

Trees are woody perennial plants that are a member of the kingdom Plantae. All species of trees are grouped by their genus, family, and order. This helps make identifying and studying trees easier.

Apart from providing oxygen for the planet and beauty when they bloom or turn color, trees are very useful. Certain species of hardwood and softwood trees are excellent for timber, making furniture, and paper.

When managed properly, trees are a good source of renewable energy and construction material.

This Pen is owned by Chris Smith on CodePen.

See more by @BlogFire on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Pure CSS Responsive animated info card

Loading interactive CodePen...

Open on CodePen

When a user hovers over the animated info card by Chris Smith, its green overlay slides to the left, revealing a text section with detailed information about trees. This card relies on three animations — slide, slide-left, and slide-up to function.

33. Flipping split card

CodePen Embed - CSS | Flipping Card Split

Live

xxxxxxxxxx

Live

xxxxxxxxxx

109

Live

xxxxxxxxxx

CSS | Flipping Card Split

This Pen is owned by Tobias Bogliolo on CodePen.

See more by @tobiasdev on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

CSS | Flipping Card Split

Loading interactive CodePen...

Open on CodePen

The flipping split card effect by Tobias Bogliolo creates a flippable card effect using CSS transforms and perspective, where a wrapper contains a flip container with front and back sides. When a user hovers over the wrapper, the .flip-left and .flip-right elements rotate 180 degrees along the Y-axis, creating a smooth flipping animation.

The backface-visibility: hidden ( docs) property ensures that only one side of the card is visible during the rotation, while the perspective and transform-style: preserve-3d ( docs) properties give the flip a three-dimensional feel.

34. House of CSS cards

CodePen Embed - House of CSS cards

Live

xxxxxxxxxx

Live

xxxxxxxxxx

168

Live

xxxxxxxxxx

House of CSS cardsWireframe

This Pen is owned by Amit Sheen on CodePen.

See more by @amit_sheen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://assets.codepen.io/1948355/twitterButton-2.1.0.js#v=2

House of CSS cards

Loading interactive CodePen...

Open on CodePen

The house of CSS cards animation by Amit Sheen creates a 3D card tower that rotates continuously. The tower is built using multiple nested .card elements; each positioned using precise rotateY, translateX, and translateY transformations to create the circular structure.

A towerRotate animation spins the entire structure at a slow, consistent pace. As the tower rotates, visitors can change the viewing angle by moving their mouse over different parts of the screen, which makes the tower look like it's shifting perspective.

Other creative animations

35. Watch tower

CodePen Embed - Watch Tower Pure CSS Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

570

Live

xxxxxxxxxx

Watch Tower Pure CSS Animation

This Pen is owned by Travis Doughty on CodePen.

See more by @tdoughty on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Watch Tower Pure CSS Animation

Loading interactive CodePen...

Open on CodePen

The watch tower animation by Travis Doughty features flying birds and moving clouds and is a great reminder that there are almost no limits to what one can create with CSS and HTML alone. This animation works with clip path, CSS transforms, and several keyframe animations.

36. Funny candle

CodePen Embed - Funny Candle Pure CSS Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

499

Funny Candle Pure CSS AnimationCandle Fun (Pure CSS Animation)

This Pen is owned by Kevin David on CodePen.

See more by @kevin_David_k on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Funny Candle Pure CSS Animation

Loading interactive CodePen...

Open on CodePen

The funny candle animation by Kevin David could easily pass for a scene from a cartoon. The candles are brought to life through multiple keyframe animations that control their body expansion, eye blinking, mouth movements, and overall positioning, while additional elements like smoke, light waves, and a flickering fire add character to the scene.

Each element—from the candles' eyes and mouths to the smoke and waves—has its own unique animation sequence.

37. Ants on sugar

CodePen Embed - Ants on Sugar CSS Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

290

Ants on Sugar CSS Animation

Sugar Cube

antantantant

This Pen is owned by Stephen Fairbanks on CodePen.

See more by @thathurtabit on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Ants on Sugar CSS Animation

Loading interactive CodePen...

Open on CodePen

The ants on sugar animation by Stephen Fairbanks uses various keyframe animations to create ants moving across a cube of sugar and the background in general.

38. Submarine

CodePen Embed - Submarine with CSS

Live

xxxxxxxxxx

Live

xxxxxxxxxx

383

Live

xxxxxxxxxx

Submarine with CSS

This Pen is owned by Alberto Jerez on CodePen.

See more by @ajerez on CodePen

External CSS

https://codepen.io/ajerez/pen/PqbdWK.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.

Submarine with CSS

Loading interactive CodePen...

Open on CodePen

The submarine animation by Alberto Jerez creates a submarine immersed in a body of water. It defines various keyframes that handle the animation of the bubbles, lights, and the submarine’s body and blades.

39. Glowing loader

CodePen Embed - The Glowing Loader - Pure CSS Animation

Live

xxxxxxxxxx

Live

xxxxxxxxxx

273

Live

xxxxxxxxxx

The Glowing Loader - Pure CSS Animation

This Pen is owned by Maxime Rossignol on CodePen.

See more by @Maxoor on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css

External JavaScript

This Pen doesn't use any external JavaScript resources.

The Glowing Loader - Pure CSS Animation

Loading interactive CodePen...

Open on CodePen

Websites with cool CSS animation examples

Twinbru

Twinbru’s website is full of many hover animations, 3D elements that move in response to the mouse’s motion, and scroll animations that would be delightful to website visitors. There’s also a color picker for changing the site’s theme, a page-load animation, and a logo animation that occurs on hover.

Fix Studio

Fix Studio’s website starts off with a mesmerizing loading animation, and then as you scroll, their projects scale into and out of view. There are also various micro-interactions that occur as you explore different pages.

This website is proof that minimalistic websites don’t need to be boring. Rather, they can be creative and engaging.

Apple — iPad Pro

Besides building sleek and performant smart devices, Apple is also known for creating beautifully designed and animation-packed landing pages for its products. An example is the iPad Pro website, which is full of many scroll animations that are nothing short of amazing.

BetterUp

Reports don’t have to be boring, and BetterUp’s landing page for its insights report is is proof. It enhances the reading experience by adding slight transitions, lottie animations, hover animations, parallax effects, and SVG animations to the site.

Somefolk

Somefolk's website kicks things off by using its logo and some text to run a page loader — powered by lottie and SVG animations. Hovering over the text or scrolling through it causes it to shift across a 3D-space — a nice micro-interaction to include.

The site also comes with other scroll animations, SVG animations, and parallax effects, which you’ll see as you scroll further.

CSS animation generators and animation tools you should know

Cubic-bezier.com

Cubic-bezier.com is an interactive tool for creating and visualizing custom cubic-bezier easing functions, which are used to control the speed and timing of motion effects, CSS animations, and transitions. The tool provides a graphical interface where you can adjust the shape of a Bézier curve by dragging control points, allowing you to see how the easing affects an animation's speed visually and in real time.

Cubic-bezier.com gives you a live preview of the Bézier curve, Includes predefined options like ease, linear, ease-in, ease-out, and ease-in-out, and automatically generates the CSS cubic-bezier() function, which you can copy and paste into your stylesheet.

AngryTools’ CSS animation kit

The CSS animation kit offers over 30 categories of animations and comes with 120+ unique types of effects. It allows you to configure animation properties like the duration, timing function, delay, iteration count, direction, and fill mode.

One of its standout features is the ability to customize keyframes — at 10% intervals — between 0% to 100%. You can define custom keyframes and add specific CSS styles for those percentages, giving you greater control and personalization.

Gradiently’s CSS animations generator

Gradiently’s CSS animations generator provides over 600 animation effects, offering endless possibilities to bring your web elements to life. Like other tools, it allows you to customize the behavior of animations via controls for direction, fill mode, duration, etc.

GSAP

Quick disclaimer: Technically speaking, GSAP isn’t a CSS animation tool, as it relies on JavaScript. However, it’s such a versatile animation library that I had to include it in this list.

GSAP is a powerful JavaScript animation library that allows you to “animate anything JS can touch.” It is a must-have tool if you’re particular about adding all kinds of animations to your website. There’s almost no type of animation you can’t create with this tool; even simple to complex hover animations.

When it comes to GSAP, the limit is your imagination and your ability to learn complex types of animations in depth. The gif below shows a showcase of animations created with GSAP.

There are only so many CSS animation tools we can cover. However, other notable ones worth mentioning include:

Conclusion

Animations can transform a website from static and functional to dynamic and engaging.

In this article, we’ve explored 40 CSS animation examples, ranging from simple, CSS-only effects to more complex ones that need JavaScript.

Whether you’re looking to add subtle enhancements or bold, eye-catching interactivity, these animations can help you bring your website to life. Experiment with and customize them to suit your brand, and watch as your website becomes more memorable and engaging to web visitors.