## [Text animations](/content/blog/css-text-animations/index.html)

### 1\. Simple text animation

CodePen Embed - Simple CSS text animation

Live

```
xxxxxxxxxx
```

11

Live

```
xxxxxxxxxx
```

66

Live

```
xxxxxxxxxx
```

1

Simple CSS text animation

Make

wOrK

lifeStyle

Everything

AweSoMe!

a css3 animation demo

This Pen is owned by [Nooray Yemon](https://codepen.io/yemon) on [CodePen](https://codepen.io/).

[See more by @yemon on CodePen](https://codepen.io/yemon)

### 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](https://codepen.io/yemon/pen/pWoROm)

The [simple text animation](https://codepen.io/yemon/pen/pWoROm) by [Nooray Yemon](https://codepen.io/yemon/pen/pWoROm) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)), 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
```

53

Live

```
xxxxxxxxxx
```

340

Live

```
xxxxxxxxxx
```

13

Pure CSS Text animation

mamunkhandakerRepeat Animation

css3animationsRepeat Animation

css3animationsRepeat Animation

css3animationsRepeat Animation

css3animationsRepeat Animation

css3animationsRepeat Animation

css3animationsRepeat Animation

This Pen is owned by [Mamun Khandaker](https://codepen.io/kh-mamun) on [CodePen](https://codepen.io/).

[See more by @kh-mamun on CodePen](https://codepen.io/kh-mamun)

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

1. [https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js)

Pure CSS Text animation

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/kh-mamun/pen/NdwZdW)

The [CSS text animation](https://codepen.io/kh-mamun/pen/NdwZdW) by [Mamun Khandaker](https://codepen.io/kh-mamun) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate)), `scale` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale)), and `opacity` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)).

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
```

40

Live

```
xxxxxxxxxx
```

382

Live

```
xxxxxxxxxx
```

1

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](https://codepen.io/oliviale) on [CodePen](https://codepen.io/).

[See more by @oliviale on CodePen](https://codepen.io/oliviale)

### External CSS

1. [https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css](https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css)

### External JavaScript

1. [https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js)

Hover Effect for Headers

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/oliviale/pen/YgzNzK)

The [hover effect for headers](https://codepen.io/oliviale/pen/YgzNzK) by [Olivia Ng](https://codepen.io/oliviale) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image), interactive hover effects, and text animations to enhance [user experience](/content/blog/ux-tips-for-developers/index.html).

### 4\. CSS party5.

CodePen Embed - CSS Party

Live

```
xxxxxxxxxx
```

14

Live

```
xxxxxxxxxx
```

125

Live

```
xxxxxxxxxx
```

53

CSS Party

# 2024

## The year of CSS

PartyChill

This Pen is owned by [David East](https://codepen.io/davideast) on [CodePen](https://codepen.io/).

[See more by @davideast on CodePen](https://codepen.io/davideast)

### External CSS

1. [https://use.typekit.net/htw6kjt.css](https://use.typekit.net/htw6kjt.css)

### External JavaScript

1. [https://unpkg.com/splitting/dist/splitting.min.js](https://unpkg.com/splitting/dist/splitting.min.js)

CSS Party

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/davideast/pen/vYPZdWV)

The [CSS party](https://codepen.io/davideast/pen/vYPZdWV) animation by [David East](https://codepen.io/davideast) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to control the animation’s timing.

## See more creative text animations!

Want to see more examples of [CSS text animations](/content/blog/css-text-animations/index.html)? Then, check out our dedicated article that covers 40 text effects.

## [Hover animations](/content/blog/css-hover-effects/index.html)

### 5\. Animated CSS mail button

CodePen Embed - Animated CSS Mail Button

Live

```
xxxxxxxxxx
```

17

Live

```
xxxxxxxxxx
```

166

Animated CSS Mail Button

This Pen is owned by [Jake Giles-Phillips](https://codepen.io/jakegilesphillips) on [CodePen](https://codepen.io/).

[See more by @jakegilesphillips on CodePen](https://codepen.io/jakegilesphillips)

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

1. [https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js)

Animated CSS Mail Button

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/jakegilesphillips/pen/MveNLe)

The [animated CSS main button](https://codepen.io/jakegilesphillips/pen/MveNLe) by [Jake Giles-Phillips](https://codepen.io/jakegilesphillips) 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
```

36

Live

```
xxxxxxxxxx
```

164

Sparkly Shiny Text ✨ [Click!Click!](https://cdpn.io/jh3y/fullembedgrid/oNqdmbW?animations=run&type=embed#)

This Pen is owned by [Jhey](https://codepen.io/jh3y) on [CodePen](https://codepen.io/).

[See more by @jh3y on CodePen](https://codepen.io/jh3y)

### External CSS

1. [https://unpkg.com/open-props/open-props.min.css](https://unpkg.com/open-props/open-props.min.css)
2. [https://unpkg.com/open-props/normalize.min.css](https://unpkg.com/open-props/normalize.min.css)
3. [https://unpkg.com/open-props/colors-hsl.min.css](https://unpkg.com/open-props/colors-hsl.min.css)

### External JavaScript

This Pen doesn't use any external JavaScript resources.

Sparkly Shiny Text ✨

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/jh3y/pen/oNqdmbW)

The [sparkly shiny text](https://codepen.io/jh3y/pen/oNqdmbW) animation by [Jhey](https://codepen.io/jh3y) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow)) for a 3D-like appearance.

### 7\. Glowing dot effect

CodePen Embed - Full CSS growing dot effect

Live

```
xxxxxxxxxx
```

8

Live

```
xxxxxxxxxx
```

73

Full CSS growing dot effect

This Pen is owned by [Vincent Durand](https://codepen.io/onediv) on [CodePen](https://codepen.io/).

[See more by @onediv on CodePen](https://codepen.io/onediv)

### 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](https://codepen.io/onediv/pen/zYEZXdz)

The [glowing dot effect](https://codepen.io/onediv/pen/zYEZXdz) by [Vincent Durand](https://codepen.io/onediv) 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
```

23

Live

```
xxxxxxxxxx
```

120

Glide To Reveal with CSS :has()

Glide To Reveal Secret Code

- 0
- 3
- 4
- 8
- 7
- 2

This Pen is owned by [Jhey](https://codepen.io/jh3y) on [CodePen](https://codepen.io/).

[See more by @jh3y on CodePen](https://codepen.io/jh3y)

### 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](https://codepen.io/jh3y/pen/JjxPKXz)

The [glide to reveal](https://codepen.io/jh3y/pen/JjxPKXz) hover effect by [Jhey](https://codepen.io/jh3y) 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
```

30

Live

```
xxxxxxxxxx
```

194

Live

```
xxxxxxxxxx
```

5

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. 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](https://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](https://codepen.io/jh3y) on [CodePen](https://codepen.io/).

[See more by @jh3y on CodePen](https://codepen.io/jh3y)

### External CSS

1. [https://unpkg.com/open-props/open-props.min.css](https://unpkg.com/open-props/open-props.min.css)
2. [https://unpkg.com/open-props/normalize.min.css](https://unpkg.com/open-props/normalize.min.css)
3. [https://codepen.io/jh3y/pen/zYRjgjW.css](https://codepen.io/jh3y/pen/zYRjgjW.css)

### External JavaScript

1. [https://codepen.io/jh3y/pen/zYRjgjW.js](https://codepen.io/jh3y/pen/zYRjgjW.js)

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

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/jh3y/pen/mdxggmO)

## Check out more CSS hover effects!

Explore our dedicated article to see more [CSS hover effects](/content/blog/css-hover-effects/index.html).

## [Button animations](/content/blog/css-button-animations/index.html)

### 10\. Keyframe tricks

CodePen Embed - Single Keyframe Tricks

Live

```
xxxxxxxxxx
```

184

Live

```
xxxxxxxxxx
```

236

Live

```
xxxxxxxxxx
```

7

Single Keyframe Tricks

## Shakes

Rejecti{ng

CLICK ME

## Pulse

Partying

CLICK ME

## Glitch

Hacking

CLICK ME

## Turn

Flipping

CLICK ME

## Fill

Loading

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

Loading

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](https://codepen.io/davideast) on [CodePen](https://codepen.io/).

[See more by @davideast on CodePen](https://codepen.io/davideast)

### External CSS

1. [https://use.typekit.net/htw6kjt.css](https://use.typekit.net/htw6kjt.css)
2. [https://raw.githubusercontent.com/argyleink/open-props/ce8c2d30c5be41c7bf00feb28894e1cd8744814f/src/props.easing.css](https://raw.githubusercontent.com/argyleink/open-props/ce8c2d30c5be41c7bf00feb28894e1cd8744814f/src/props.easing.css)

### External JavaScript

This Pen doesn't use any external JavaScript resources.

Single Keyframe Tricks

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/davideast/pen/MWxvzjm)

The [keyframe tricks](https://codepen.io/davideast/pen/MWxvzjm) effect by [David East](https://codepen.io/davideast) 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
```

18

Live

```
xxxxxxxxxx
```

283

CSS Fizzy Button

# Fizzy CSS Button

## With super fizzy particle action

[More Codepen shenanigans](https://www.codepen.io/jcoulterdesign)
Downloads

This Pen is owned by [Jamie Coulter](https://codepen.io/jcoulterdesign) on [CodePen](https://codepen.io/).

[See more by @jcoulterdesign on CodePen](https://codepen.io/jcoulterdesign)

### External CSS

1. [https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.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](https://codepen.io/jcoulterdesign/pen/xVJWvz)

The [CSS fizzy button](https://codepen.io/jcoulterdesign/pen/xVJWvz) by [Jamie Coulter](https://codepen.io/jcoulterdesign) 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
```

12

Live

```
xxxxxxxxxx
```

244

Fun 3D buttonPlay

Made by [@LukyVj](https://twitter.com/lukyvj)

Inspired by [https://twitter.com/aleksliving/status/1635306125393551360](https://twitter.com/aleksliving/status/1635306125393551360)

`d` to debug

`p` Presentation

This Pen is owned by [LukyVJ](https://codepen.io/LukyVj) on [CodePen](https://codepen.io/).

[See more by @LukyVj on CodePen](https://codepen.io/LukyVj)

### External CSS

1. [https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.css](https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.css)

### External JavaScript

1. [https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.js](https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.js)

Fun 3D button

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/LukyVj/pen/oNPJrdy)

The [fun 3D button](https://codepen.io/LukyVj/pen/oNPJrdy) by [LukyVJ](https://codepen.io/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](/content/courses/fizzi-3d-website/index.html)

### 13\. Rainbow gradient button

CodePen Embed - Lil rainbow gradient button

Live

```
xxxxxxxxxx
```

18

Live

```
xxxxxxxxxx
```

256

Lil rainbow gradient button
Join today!

Made by [@LukyVj](https://twitter.com/lukyvj)

This Pen is owned by [LukyVJ](https://codepen.io/LukyVj) on [CodePen](https://codepen.io/).

[See more by @LukyVj on CodePen](https://codepen.io/LukyVj)

### External CSS

1. [https://codepen.io/LukyVj/pen/JjavKEX/ca2344eb8511404c494dd71d1ca8f1a7.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](https://codepen.io/LukyVj/pen/LYJBdYo)

The [rainbow gradient button](https://codepen.io/LukyVj/pen/LYJBdYo) by [LukyVJ](https://codepen.io/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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)) to work.

### 14\. Storm button

CodePen Embed - Andreas Storm button

Live

```
xxxxxxxxxx
```

30

Live

```
xxxxxxxxxx
```

117

Andreas Storm button

Button

This Pen is owned by [jwktje](https://codepen.io/jwktje) on [CodePen](https://codepen.io/).

[See more by @jwktje on CodePen](https://codepen.io/jwktje)

### 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](https://codepen.io/jwktje/pen/JjBaJBv)

The [storm button](https://codepen.io/jwktje/pen/JjBaJBv) by [jwktje](https://codepen.io/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
```

1

Live

```
xxxxxxxxxx
```

167

Live

```
xxxxxxxxxx
```

6

Toggle Switch with a Hole Handle

This Pen is owned by [Jon Kantner](https://codepen.io/jkantner) on [CodePen](https://codepen.io/).

[See more by @jkantner on CodePen](https://codepen.io/jkantner)

### 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](https://codepen.io/jkantner/pen/OJNezxj)

[Jon Kantner](https://codepen.io/jkantner) created a [toggle switch with a hole](https://codepen.io/jkantner/pen/OJNezxj) 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
```

26

Live

```
xxxxxxxxxx
```

274

Live

```
xxxxxxxxxx
```

1

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

CSS

is

Awesome

This Pen is owned by [Jhey](https://codepen.io/jh3y) on [CodePen](https://codepen.io/).

[See more by @jh3y on CodePen](https://codepen.io/jh3y)

### 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](https://codepen.io/jh3y/pen/ExNQxKV)

The [pure CSS drawer](https://codepen.io/jh3y/pen/ExNQxKV) by [Jhey](https://codepen.io/jh3y) 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
```

40

Live

```
xxxxxxxxxx
```

70

Copy Button Click Effect

GroupGroup

long press me

This Pen is owned by [Arjun Ace](https://codepen.io/arjunace) on [CodePen](https://codepen.io/).

[See more by @arjunace on CodePen](https://codepen.io/arjunace)

### 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](https://codepen.io/arjunace/pen/dyMdbyr)

The [copy button click effect](https://codepen.io/arjunace/pen/dyMdbyr) by [Arjun Ace](https://codepen.io/arjunace) 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
```

3

Live

```
xxxxxxxxxx
```

127

SCSS Beveled ButtonsGet Bevel’dBevel Up

This Pen is owned by [Brandon McConnell](https://codepen.io/brandonmcconnell) on [CodePen](https://codepen.io/).

[See more by @brandonmcconnell on CodePen](https://codepen.io/brandonmcconnell)

### External CSS

1. [https://fonts.googleapis.com/css?family=Chewy\|Didact+Gothic](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](https://codepen.io/brandonmcconnell/pen/bzwMxx)

The [beveled buttons](https://codepen.io/brandonmcconnell/pen/bzwMxx) animation by [Brandon McConnell](https://codepen.io/brandonmcconnell) 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
```

84

Live

```
xxxxxxxxxx
```

117

Live

```
xxxxxxxxxx
```

4

Black Biometirics Button

LOGIN

This Pen is owned by [Mikael Ainalem](https://codepen.io/ainalem) on [CodePen](https://codepen.io/).

[See more by @ainalem on CodePen](https://codepen.io/ainalem)

### 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](https://codepen.io/ainalem/pen/mQBNpg)

The [biometrics button](https://codepen.io/ainalem/pen/mQBNpg) by [Mikael Ainalem](https://codepen.io/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
```

38

Live

```
xxxxxxxxxx
```

525

Kinetic CSS loaders

This Pen is owned by [Jenning](https://codepen.io/jenning) on [CodePen](https://codepen.io/).

[See more by @jenning on CodePen](https://codepen.io/jenning)

### 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](https://codepen.io/jenning/pen/LYWJdWz)

The [kinetic CSS loaders](https://codepen.io/jenning/pen/LYWJdWz) by [Jenning](https://codepen.io/jenning) use a combination of keyframes, [pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/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
```

9

Live

```
xxxxxxxxxx
```

65

Newton's cradle using only CSS

This Pen is owned by [Arushi Bajpai](https://codepen.io/arushi011) on [CodePen](https://codepen.io/).

[See more by @arushi011 on CodePen](https://codepen.io/arushi011)

### 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](https://codepen.io/arushi011/pen/EXmMvx)

[Newton’s cradle](https://codepen.io/arushi011/pen/EXmMvx) animation by [Arushi Bajpai](https://codepen.io/arushi011) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)) 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
```

3

Live

```
xxxxxxxxxx
```

87

Glowing Loader Ring Animation

Loading

This Pen is owned by [Ekta maurya](https://codepen.io/Curlmuhi) on [CodePen](https://codepen.io/).

[See more by @Curlmuhi on CodePen](https://codepen.io/Curlmuhi)

### 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](https://codepen.io/Curlmuhi/pen/ExKWXKO)

The [glowing loader ring](https://codepen.io/Curlmuhi/pen/ExKWXKO) animation by [Ekta maurya](https://codepen.io/Curlmuhi) 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
```

4

Live

```
xxxxxxxxxx
```

84

Never-ending box

This Pen is owned by [Pawel](https://codepen.io/pawelqcm) on [CodePen](https://codepen.io/).

[See more by @pawelqcm on CodePen](https://codepen.io/pawelqcm)

### 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](https://codepen.io/pawelqcm/pen/dMqrqd)

The [making-pancake loader](https://codepen.io/pawelqcm/pen/ObwyNe) by [Pawel](https://codepen.io/pawelqcm) 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
```

10

Live

```
xxxxxxxxxx
```

150

Speedy truck

This Pen is owned by [Tippy Fodder](https://codepen.io/tippyfodder) on [CodePen](https://codepen.io/).

[See more by @tippyfodder on CodePen](https://codepen.io/tippyfodder)

### 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](https://codepen.io/tippyfodder/pen/OyXWpr)

The [speedy truck](https://codepen.io/tippyfodder/pen/OyXWpr) animation by [Tippy fodder](https://codepen.io/tippyfodder) 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

1. `tree3`: Another variation for the third tree, starting at 2750px
2. `rock`: Animates rocks from right to left
3. `truck`: Simulates the truck's motion by slightly bouncing it up and down to mimic driving over uneven terrain
4. `wind`: Animates the "wind" effect on the truck's visual elements by slightly moving them up and down
5. `mtn`: Moves the mountain backdrop horizontally from its initial position to create the illusion of distant background movement
6. `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
```

52

Live

```
xxxxxxxxxx
```

192

Dropdown Menus

This Pen is owned by [Kevin](https://codepen.io/kkrueger) on [CodePen](https://codepen.io/).

[See more by @kkrueger on CodePen](https://codepen.io/kkrueger)

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

1. [//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js)

Dropdown Menus

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/kkrueger/pen/jOrYaM)

[Kevin’s](https://codepen.io/kkrueger) [dropdown menus](https://codepen.io/kkrueger/pen/jOrYaM) 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
```

1

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](https://www.jamiecoulter.co.uk/)

This Pen is owned by [Jamie Coulter](https://codepen.io/jcoulterdesign) on [CodePen](https://codepen.io/).

[See more by @jcoulterdesign on CodePen](https://codepen.io/jcoulterdesign)

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

1. [//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js](https://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](https://codepen.io/jcoulterdesign/pen/qdWxEm)

The swanky CSS Drop Down menu by [Jamie Coulter](https://codepen.io/jcoulterdesign) 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](https://codepen.io/tonkec/details/aRMaWR)

The [pure CSS menu](https://codepen.io/tonkec/pen/aRMaWR) by [Antonija Šimić](https://codepen.io/tonkec) 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
```

23

Live

```
xxxxxxxxxx
```

208

💪 CSS menu feat. emoji

This Pen is owned by [Piotr Galor](https://codepen.io/pgalor) on [CodePen](https://codepen.io/).

[See more by @pgalor on CodePen](https://codepen.io/pgalor)

### 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](https://codepen.io/pgalor/pen/mKGdwr)

[💪 CSS menu feat. emoji](https://codepen.io/pgalor/pen/mKGdwr) by [Piotr Galor](https://codepen.io/pgalor) 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
```

9

Live

```
xxxxxxxxxx
```

183

Pure CSS Menu Animation

# Explore

# Connect

# Interact

This Pen is owned by [Charlie Marcotte](https://codepen.io/FUGU22) on [CodePen](https://codepen.io/).

[See more by @FUGU22 on CodePen](https://codepen.io/FUGU22)

### 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](https://codepen.io/FUGU22/pen/bYbNaY)

The [pure CSS menu animation](https://codepen.io/FUGU22/pen/bYbNaY) by [Charlie Marcotte](https://codepen.io/FUGU22) 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](/content/dashboard/signup/index.html)

## Card animations

### 30\. 3D cards flip

CodePen Embed - 3D Cards Flip

Live

```
xxxxxxxxxx
```

23

Live

```
xxxxxxxxxx
```

120

3D Cards Flip

This Pen is owned by [Julien Sulpis](https://codepen.io/jsulpis) on [CodePen](https://codepen.io/).

[See more by @jsulpis on CodePen](https://codepen.io/jsulpis)

### 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](https://codepen.io/jsulpis/pen/VwBNoEb)

The [3D cards flip](https://codepen.io/jsulpis/pen/VwBNoEb) effect by [Julien Sulpis](https://codepen.io/jsulpis) 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
```

14

Card hover effect

#### Products

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

#### Categories

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

This Pen is owned by [Aaron Iker](https://codepen.io/aaroniker) on [CodePen](https://codepen.io/).

[See more by @aaroniker on CodePen](https://codepen.io/aaroniker)

### External CSS

1. [https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.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](https://codepen.io/aaroniker/pen/yLEPJXj)

The [card hover effect](https://codepen.io/aaroniker/pen/yLEPJXj) by [Aaron Iker](https://codepen.io/aaroniker) creates cards that, when hovered on, receive a shiny tile effect. Among others, it relies on CSS features like `mask-image` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image)), `backdrop-filter` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)), `conic-gradient` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient)), `radial-gradient` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient)), 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
```

20

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](https://codepen.io/BlogFire) on [CodePen](https://codepen.io/).

[See more by @BlogFire on CodePen](https://codepen.io/BlogFire)

### 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](https://codepen.io/BlogFire/pen/mdXNMVX)

When a user hovers over the [animated info card](https://codepen.io/BlogFire/pen/mdXNMVX) by [Chris Smith](https://codepen.io/BlogFire), 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
```

23

Live

```
xxxxxxxxxx
```

109

Live

```
xxxxxxxxxx
```

14

CSS \| Flipping Card Split

This Pen is owned by [Tobias Bogliolo](https://codepen.io/tobiasdev) on [CodePen](https://codepen.io/).

[See more by @tobiasdev on CodePen](https://codepen.io/tobiasdev)

### 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](https://codepen.io/tobiasdev/pen/XjyaKr)

The [flipping split card](https://codepen.io/tobiasdev/pen/XjyaKr) effect by [Tobias Bogliolo](https://codepen.io/tobiasdev) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility)) property ensures that only one side of the card is visible during the rotation, while the `perspective` and `transform-style: preserve-3d` ( [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style)) properties give the flip a three-dimensional feel.

### 34\. House of CSS cards

CodePen Embed - House of CSS cards

Live

```
xxxxxxxxxx
```

58

Live

```
xxxxxxxxxx
```

168

Live

```
xxxxxxxxxx
```

5

House of CSS cardsWireframe

This Pen is owned by [Amit Sheen](https://codepen.io/amit_sheen) on [CodePen](https://codepen.io/).

[See more by @amit\_sheen on CodePen](https://codepen.io/amit_sheen)

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

1. [https://assets.codepen.io/1948355/twitterButton-2.1.0.js#v=2](https://assets.codepen.io/1948355/twitterButton-2.1.0.js#v=2)

House of CSS cards

Loading interactive CodePen...

[Open on CodePen](https://codepen.io/amit_sheen/pen/QWGjRKR)

The [house of CSS cards](https://codepen.io/amit_sheen/pen/QWGjRKR) animation by [Amit Sheen](https://codepen.io/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
```

76

Live

```
xxxxxxxxxx
```

570

Live

```
xxxxxxxxxx
```

2

Watch Tower Pure CSS Animation

This Pen is owned by [Travis Doughty](https://codepen.io/tdoughty) on [CodePen](https://codepen.io/).

[See more by @tdoughty on CodePen](https://codepen.io/tdoughty)

### 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](https://codepen.io/tdoughty/pen/bGGZWqg)

The [watch tower](https://codepen.io/tdoughty/pen/bGGZWqg) animation by [Travis Doughty](https://codepen.io/tdoughty) 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
```

54

Live

```
xxxxxxxxxx
```

499

Funny Candle Pure CSS AnimationCandle Fun (Pure CSS Animation)

This Pen is owned by [Kevin David](https://codepen.io/kevin_David_k) on [CodePen](https://codepen.io/).

[See more by @kevin\_David\_k on CodePen](https://codepen.io/kevin_David_k)

### 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](https://codepen.io/kevin_David_k/pen/eYNeQVY)

The [funny candle](https://codepen.io/kevin_David_k/pen/eYNeQVY) animation by [Kevin David](https://codepen.io/kevin_David_k) 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
```

9

Live

```
xxxxxxxxxx
```

290

Ants on Sugar CSS Animation

# Sugar Cube

antantantant

This Pen is owned by [Stephen Fairbanks](https://codepen.io/thathurtabit) on [CodePen](https://codepen.io/).

[See more by @thathurtabit on CodePen](https://codepen.io/thathurtabit)

### 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](https://codepen.io/thathurtabit/pen/bgWdge)

The [ants on sugar](https://codepen.io/thathurtabit/pen/bgWdge) animation by [Stephen Fairbanks](https://codepen.io/thathurtabit) 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
```

25

Live

```
xxxxxxxxxx
```

383

Live

```
xxxxxxxxxx
```

6

Submarine with CSS

This Pen is owned by [Alberto Jerez](https://codepen.io/ajerez) on [CodePen](https://codepen.io/).

[See more by @ajerez on CodePen](https://codepen.io/ajerez)

### External CSS

1. [https://codepen.io/ajerez/pen/PqbdWK.scss](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](https://codepen.io/ajerez/pen/EaEEOW)

The [submarine](https://codepen.io/ajerez/pen/EaEEOW) animation by [Alberto Jerez](https://codepen.io/ajerez) 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
```

21

Live

```
xxxxxxxxxx
```

273

Live

```
xxxxxxxxxx
```

1

The Glowing Loader - Pure CSS Animation

This Pen is owned by [Maxime Rossignol](https://codepen.io/Maxoor) on [CodePen](https://codepen.io/).

[See more by @Maxoor on CodePen](https://codepen.io/Maxoor)

### External CSS

1. [https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.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](https://codepen.io/Maxoor/pen/JZZvXJ)

## Websites with cool CSS animation examples

### Twinbru

[Twinbru](https://www.twinbru.com/)’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](https://fix.studio/) 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](https://www.apple.com/ipad-pro/), 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](https://grow.betterup.com/resources/insights-report-inclusive-leadership) for its insights report is is proof. It enhances the reading experience by adding slight transitions, [lottie animations](https://iconscout.com/lottie-animations), hover animations, parallax effects, and SVG animations to the site.

### Somefolk

[Somefolk's website](https://www.somefolk.co/) 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](http://cubic-bezier.com/)

[Cubic-bezier.com](https://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](http://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](https://angrytools.com/css/animation/) 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](https://gradienty.codes/animations) 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](https://gsap.com/) isn’t a CSS animation tool, as it relies on [JavaScript](/content/glossary/javascript-framework/index.html). 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:

- [TheAppGuruz’s keyframe animation generator](https://www.theappguruz.com/tag-tools/web/CSSAnimations/)
- [DevTools’ CSS animation generator](https://tools.webdevpuneet.com/css-animation-generator/)
- [Toptal’s animation code generator](https://www.toptal.com/developers/css3maker/css3-animation)
- [Front-end Tools’ CSS transition generator](https://front-end-tools.com/en/generateTransition/)
- [CSS Portal’s CSS keyframe animation generator](https://www.cssportal.com/css-animation-generator/)
- [Web Code Tools’ CSS animation generator](https://webcode.tools/css-generator/keyframe-animation)

## 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.

## You might also like...

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**CSS Hover Effects: 40 Engaging Animations To Try**](/content/blog/css-hover-effects/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**CSS Button Animations: 40 Ideas to Inspire You + Code Examples**](/content/blog/css-button-animations/index.html)

## This article is part of the'CSS Animation Collection: 150+ Examples & Code'guide

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 1: CSS Text Animations: 40 Creative Examples to Try**](/content/blog/css-text-animations/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 2: CSS Hover Effects: 40 Engaging Animations To Try**](/content/blog/css-hover-effects/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 3: CSS Button Animations: 40 Ideas to Inspire You + Code Examples**](/content/blog/css-button-animations/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 5: Tailwind CSS Animations: Tutorial and 40+ Examples**](/content/blog/tailwind-animations/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 6: 40 CSS Background Effects to Enhance Your Website**](/content/blog/css-background-effects/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 7: 50 Creative CSS Image Effects for Engaging Websites**](/content/blog/css-image-effects/index.html)

[Performance & UX](/content/blog/category/performance-and-ux/index.html)

[**Part 8: CSS Scroll Effects: 50 Interactive Animations to Try**](/content/blog/css-scroll-effects/index.html)

PreviousNext

Hit your website goals

## Websites success stories from the Prismic Community

### How Arcadia is Telling a Consistent Brand Story

[Read Case Study](/content/customers/arcadia/index.html)

### How Evri Cut their Time to Ship

[Read Case Study](/content/customers/evri/index.html)

### How Pallyy Grew Daily Visitors from 500 to 10,000

[Read Case Study](/content/customers/pallyy/index.html)

### From Powder to Pixels - Perfectly Planned Ski Vacations, Now Perfectly Digital

[Read Case Study](/content/customers/ski-com/index.html)

Prismic Toolbar iFrame