In this article, we’ll explore 39 CSS animation examples you can add to your website to enhance its interactivity and visual appeal. We’ll view a mix of animations along the way — those that work solely with CSS and those that require JavaScript to work. Let’s dive in!

1- Simple Text animtion:


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:


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- CSS party5.


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.



Hover animations

4- Animated CSS mail button


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.

5- Sparkly shiny text:


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.

6- Glide to reveal:


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.

7- CSS fizzy button:


8- Fun 3D button:


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.

9- Rainbow gradient button:


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.

10- Storm button:


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

11- Toggle switch with a hole:


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.

12- Pure CSS drawer:


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.

13- Beveled buttons:


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.

14- Biometrics button:


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

15- Kinetic CSS loaders:


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.

16- Glowing loader ring:


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.

17- Speedy truck:


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:

  1. tree: Animates the trees to move from the right side of the screen (1350px) to the left side (-50px)
  2. tree2: Similar to tree, but starts at 650px, creating variation in the scrolling speed and position of the second tree
  3. tree3: Another variation for the third tree, starting at 2750px
  4. rock: Animates rocks from right to left
  5. truck: Simulates the truck's motion by slightly bouncing it up and down to mimic driving over uneven terrain
  6. wind: Animates the "wind" effect on the truck's visual elements by slightly moving them up and down
  7. mtn: Moves the mountain backdrop horizontally from its initial position to create the illusion of distant background movement
  8. hill: Similar to mtn, moves the hill horizontally to simulate scrolling terrain closer to the foreground


Menu animations

18- Dropdown menus:


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.

19- Swanky CSS Drop Down menu:


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.

20- Pure CSS menu:


21- Pure CSS menu animation:


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.


Card animations

22- 3D cards flip:


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.

23- Animated info card:


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.

24- Funny candle:


25- Glowing loader: