shoelace/docs/components/animation.md

# Animate

[component-header:sl-animate]

Animate elements declaratively using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). Select from over 500 baked-in presets or roll your own with custom [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats).

```html preview
<sl-animation
  name="bounce"
  easing="ease-in-out"
  duration="2000"
  delay="300"
  iterations="Infinity"
  autoplay
>
  <div style="width: 100px; height: 100px; background-color: var(--sl-color-primary-50);"></div>
</sl-animation>

<br>

<sl-select value="bounce"></sl-select>

<script>
  const animations = ['none', 'bounce', 'flash', 'jello', 'pulse', 'rotate', 'shake', 'swing', 'rubberBand', 'tada', 'wobble', 'heartBeat', 'bounceIn', 'bounceInUp', 'bounceInDown', 'bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutRight', 'bounceOutLeft', 'fadeIn', 'fadeInUp', 'fadeInUpBig', 'fadeInDown', 'fadeInDownBig', 'fadeInRightBig', 'fadeInLeftBig', 'fadeOut', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutLeft', 'fadeOutLeftBig', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedIn', 'lightSpeedOut', 'rotateIn', 'rotateInClockwise', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutClockwise', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'slideInUp', 'slideInDown', 'slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'scale-up-center', 'scale-up-top', 'scale-up-tr', 'scale-up-right', 'scale-up-br', 'scale-up-bottom', 'scale-up-bl', 'scale-up-left', 'scale-up-tl', 'scale-up-hor-center', 'scale-up-hor-left', 'scale-up-hor-right', 'scale-up-ver-center', 'scale-up-ver-top', 'scale-up-ver-bottom', 'scale-down-center', 'scale-down-top', 'scale-down-tr', 'scale-down-right', 'scale-down-br', 'scale-down-bottom', 'scale-down-bl', 'scale-down-left', 'scale-down-tl', 'scale-down-hor-center', 'scale-down-hor-left', 'scale-down-hor-right', 'scale-down-ver-center', 'scale-down-ver-top', 'scale-down-ver-bottom', 'rotate-center', 'rotate-top', 'rotate-tr', 'rotate-right', 'rotate-br', 'rotate-bottom', 'rotate-bl', 'rotate-left', 'rotate-tl', 'rotate-hor-center', 'rotate-hor-top', 'rotate-hor-bottom', 'rotate-vert-center', 'rotate-vert-left', 'rotate-vert-right', 'rotate-diagonal-1', 'rotate-diagonal-2', 'rotate-diagonal-tr', 'rotate-diagonal-br', 'rotate-diagonal-bl', 'rotate-diagonal-tl', 'rotate-scale-up', 'rotate-scale-down', 'rotate-scale-up-hor', 'rotate-scale-down-hor', 'rotate-scale-up-ver', 'rotate-scale-down-ver', 'rotate-scale-up-diag-1', 'rotate-scale-down-diag-1', 'rotate-scale-up-diag-2', 'rotate-scale-down-diag-2', 'rotate-90-cw', 'rotate-90-ccw', 'rotate-90-top-cw', 'rotate-90-top-ccw', 'rotate-90-tr-cw', 'rotate-90-tr-ccw', 'rotate-90-right-cw', 'rotate-90-right-ccw', 'rotate-90-br-cw', 'rotate-90-br-ccw', 'rotate-90-bottom-cw', 'rotate-90-bottom-ccw', 'rotate-90-bl-cw', 'rotate-90-bl-ccw', 'rotate-90-left-cw', 'rotate-90-left-ccw', 'rotate-90-tl-cw', 'rotate-90-tl-ccw', 'rotate-90-horizontal-fwd', 'rotate-90-horizontal-bck', 'rotate-90-vertical-fwd', 'rotate-90-vertical-bck', 'flip-horizontal-bottom', 'flip-horizontal-top', 'flip-horizontal-bck', 'flip-horizontal-fwd', 'flip-vertical-right', 'flip-vertical-left', 'flip-vertical-bck', 'flip-vertical-fwd', 'flip-diagonal-1-tr', 'flip-diagonal-1-bl', 'flip-diagonal-1-bck', 'flip-diagonal-1-fwd', 'flip-diagonal-2-br', 'flip-diagonal-2-tl', 'flip-diagonal-2-bck', 'flip-diagonal-2-fwd', 'flip-2-hor-top-1', 'flip-2-hor-top-2', 'flip-2-hor-top-bck', 'flip-2-hor-top-fwd', 'flip-2-ver-right-1', 'flip-2-ver-right-2', 'flip-2-ver-right-bck', 'flip-2-ver-right-fwd', 'flip-2-hor-bottom-1', 'flip-2-hor-bottom-2', 'flip-2-hor-bottom-bck', 'flip-2-hor-bottom-fwd', 'flip-2-ver-left-1', 'flip-2-ver-left-2', 'flip-2-ver-left-bck', 'flip-2-ver-left-fwd', 'flip-scale-up-hor', 'flip-scale-down-hor', 'flip-scale-up-ver', 'flip-scale-down-ver', 'flip-scale-up-diag-1', 'flip-scale-down-diag-1', 'flip-scale-up-diag-2', 'flip-scale-down-diag-2', 'flip-scale-2-hor-top', 'flip-scale-2-ver-right', 'flip-scale-2-hor-bottom', 'flip-scale-2-ver-left', 'swing-top-fwd', 'swing-top-bck', 'swing-top-right-fwd', 'swing-top-right-bck', 'swing-right-fwd', 'swing-right-bck', 'swing-bottom-right-fwd', 'swing-bottom-right-bck', 'swing-bottom-fwd', 'swing-bottom-bck', 'swing-bottom-left-fwd', 'swing-bottom-left-bck', 'swing-left-fwd', 'swing-left-bck', '
  const animation = document.querySelector('sl-animation');
  const select = document.querySelector('sl-select');

  animations.map(name => {
    const menuItem = Object.assign(document.createElement('sl-menu-item'), {
      textContent: name,
      value: name
    });
    select.appendChild(menuItem);
  });

  select.addEventListener('slChange', () => animation.name = select.value);
</script>
```

## Examples

[component-metadata:sl-animate]