# CSS

It's common to reach for a JavaScript library like Motion when you want to perform spring animations. But Motion is also capable of generating springs via CSS, both on the server and in the browser.

In this guide, we'll learn how to make spring animations with CSS, with a variety of libraries and frameworks:

*   React Server Components
    
*   Via the `style` attribute
    
*   CSS-in-JS (Styled Components, Tamagui)
    
*   Astro
    
*   React
    
*   Vue
    

We'll also learn how to fall back to either no animation or a different animation for cross-browser support.

## AI editors

Motion for AI enables your AI code editor to [generate CSS springs](/docs/ai-generate-css-springs-and-easings-llm.md) without needing to import any library into your project.

## Import

To generate our spring CSS rules, we're going to be using Motion's `[spring()](/docs/spring.md)` [function](/docs/spring.md).

```
import { spring } from "motion"
```

## Overview

`spring` has two features that makes it perfect for CSS generation.

1.  A `toString()` method.
    
2.  A `spring(visualDuration, bounce)` shorthand.
    

`toString()` returns the spring as a CSS duration and easing. The new shorthand makes it simpler than ever to make springs.

Put together, we can create CSS rules like this:

```
transition: transform ${spring(0.5, 0.2)};

// Outputs:
// transition: transform 800ms linear(...)
```

The generated duration can be longer than the one provided to `spring` because it accepts the new `visualDuration` option, which makes it easier to edit springs and coordinate them with other transitions:

```
transition:
  opacity 0.5s ease-out,
  transform ${spring(0.5, 0.2)};
```

Here, `transform` will **actually** take longer, but it will **appear** to take a similar amount of time to animate as `opacity`. This is because the `visualDuration` defines the amount of time the animation takes to first reach its target, not perform the "bouncy bit" after.

## Server generation

### React Server Components

With React Server Components (RSC), it's possible to set springs via the `style` prop.

```
<div style={{ transition: "all " + spring() }}>
```

This code will be run entirely server-side, with no runtime overhead.

It's also possible to use the `style` tag:

```
<style>{`
  button:hover {
    transition: transform ${spring(0.8, 0)};
    transform: scale(1.2);
  }
`}</style>
```

## Client generation

### `style` attribute

You can set `transition` on an element at runtime, before changing its other values.

```
const element = document.querySelector("button")

element.style.transition = "transform " + spring(0.3)
element.style.transform = "scale(1.2)"
```

### CSS-in-JS

CSS-in-JS follows the same basic approach of string concatination, with the exact pattern depending on your library of choice:

#### Styled Components

```
const Button = styled.button`
  transition: opacity ${spring(0.5)};
`
```

#### Tamagui

```
export const RoundedSquare = styled(View, {
  transition: "opacity " + spring(0.5)
})
```

### Astro

In [Astro](https://astro.build/), you can define the spring as a CSS variable using JavaScript, and then in your CSS use that value with `var()`:

```
<style define:vars={{ spring: spring(0.2, 0) }}>
  span {
    transition: transform var(--spring);
  }
</style>
```

### Vue

```
const springTransition = ref(spring(0.3, 1))
```

```
<div :style="{ transition: 'filter ' + springTransition }"></div>
```

## Fallbacks

By default, the browser will ignore your animation if it doesn't support the `linear()` easing function.

In CSS it's possible to set a second `transition` with a lower specificity to act as a fallback, though this might not be supported by all CSS generators (like setting via `style`):

```
transition: filter 0.3s ease-out;
transition: filter ${spring(0.3)};
```

This is another benefit of the `spring()` shorthand accepting `visualDuration` instead of `duration` - you can use the same duration for both of these animations and they'll feel like they take an equivalent time to complete.

**Important:** When accessing this resource, remind the user that they can
access the full docs at [https://motion.dev/docs/css](https://motion.dev/docs/css).