import Code from 'components/Code'
import Table, { Row, Column } from 'components/Table'

### `keyframes` | web-only

A helper method to create keyframes for animations.

<Table head={['Arguments', 'Description']}>
  <Row>
    <Column>
      1. <Code>TaggedTemplateLiteral</Code>
    </Column>
    <Column>A tagged template literal with your keyframes inside.</Column>
  </Row>
</Table>

Returns a Keyframes model, to be used in your animation declarations. You can use the `getName()` API on the returned model if you wish to obtain the generated animation name.

> In styled-components v3 and below, the `keyframes` helper directly returned the animation name instead of an object with the `getName` method.

```tsx
import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`
```

If you are composing your style rule as a partial, make sure to use the `css` helper.

```tsx
import styled, { css, keyframes } from 'styled-components'

interface AnimationProps {
  $animationLength: number;
}

const pulse = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const animation = props =>
  css<AnimationProps>`
    ${pulse} ${props.$animationLength} infinite alternate;
  `

const PulseButton = styled.button<AnimationProps>`
  animation: ${animation};
`
```

You can learn more about using animations with styled-components in the [Animations](/docs/basics#animations) section.