---
title: Animations
path: utilities/animations
example_layout: toggle
status: Stable
source: 'https://github.com/primer/css/blob/main/src/utilities/animations.scss'
bundle: utilities
---
Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
## Fade in
The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
```html live
Hello from GitHub!
```
## Fade out
The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
```html live
Hello from GitHub!
```
## Fade up
The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
```html live
Hello from GitHub!
```
## Fade down
The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
```html live
Hello from GitHub!
```
## Scale in
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
```html live
```
## Grow x
The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
```html live
```
## Pulse
The `.anim-pulse` class will pulse an element infinitely.
```html live
```
## Hover animation
The `.anim-hover-grow` class will increase the scale of the element upon hover.
```html live
```
## Rotation
The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
```html live
```