{
  "tag": "ed-animation",
  "kind": "component",
  "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/animation/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/animation/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Drawing the eye to a row or card that just changed, for example a booking that was added, with a short pulse",
    "Fading or sliding in a panel or message so users notice it appeared, with a set duration and easing"
  ],
  "notFor": [
    {
      "when": "Motion that carries no information or runs continuously, which distracts people working with figures all day",
      "instead": "a [Skeleton](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/skeleton) for a loading state or a [Progress Bar](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar) for running work"
    },
    {
      "when": "Showing that an operation is running",
      "instead": "a [Progress Ring](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-ring) or a [Progress Bar](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/progress-bar)"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "name",
        "property": "name",
        "type": "string",
        "default": "'none'",
        "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop."
      },
      {
        "name": "play",
        "property": "play",
        "type": "boolean",
        "default": "false",
        "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.\n\nFor a viewer who has asked their system for reduced motion, the run is squeezed into about a\nmillisecond and an endless animation is capped at one iteration, so nothing is seen to move and\nthe animation does reach an end. `delay`, `end-delay` and `playback-rate` are left alone, so\nthose still decide when the end arrives. One consequence has no counterpart without the\npreference: the default endless animation now finishes, which clears `play` — code that expects\n`play` to stay set should set it again rather than assume it."
      },
      {
        "name": "delay",
        "property": "delay",
        "type": "number",
        "default": "0",
        "description": "The number of milliseconds to delay the start of the animation."
      },
      {
        "name": "direction",
        "property": "direction",
        "type": "'alternate' | 'alternate-reverse' | 'normal' | 'reverse'",
        "default": "'normal'",
        "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)"
      },
      {
        "name": "duration",
        "property": "duration",
        "type": "number",
        "default": "1000",
        "description": "The number of milliseconds each iteration of the animation takes to complete."
      },
      {
        "name": "easing",
        "property": "easing",
        "type": "string",
        "default": "'linear'",
        "description": "The easing function to use for the animation. This can be an easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`."
      },
      {
        "name": "end-delay",
        "property": "endDelay",
        "type": "number",
        "default": "0",
        "description": "The number of milliseconds to delay after the active period of an animation sequence."
      },
      {
        "name": "fill",
        "property": "fill",
        "type": "'auto' | 'both' | 'none' | 'backwards' | 'forwards'",
        "default": "'auto'",
        "description": "Sets how the animation applies styles to its target before and after its execution."
      },
      {
        "name": "iterations",
        "property": "iterations",
        "default": "Infinity",
        "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
      },
      {
        "name": "iteration-start",
        "property": "iterationStart",
        "type": "number",
        "default": "0",
        "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end)."
      },
      {
        "name": "playback-rate",
        "property": "playbackRate",
        "type": "number",
        "default": "1",
        "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "keyframes",
        "type": "Keyframe[] | undefined",
        "description": "The keyframes to use for the animation. If this is set, `name` will be ignored."
      },
      {
        "name": "currentTime",
        "type": "CSSNumberish",
        "description": "Gets and sets the current animation time."
      }
    ],
    "methods": [
      {
        "name": "cancel",
        "description": "Clears all keyframe effects caused by this animation and aborts its playback."
      },
      {
        "name": "finish",
        "description": "Sets the playback time to the end of the animation corresponding to the current playback\ndirection.\n\nThrows `InvalidStateError` where there is no end to seek to: a playback rate of zero, or a\nplayback rate above zero with an effect end of infinity. Both reachable here, through\n`playback-rate=\"0\"` and through the default `iterations` of `Infinity`. The two conditions are\none rule, not two — `playback-rate=\"-1\"` with endless `iterations` seeks to the start and does\nnot throw. Measured in Chromium and Firefox. Under a reduced-motion preference the default is\nno longer endless, so the same call succeeds there.\n\nIt does nothing at all when there is no animation yet — before the first render, and while the\nelement is out of the document, which is also true of `cancel()`."
      }
    ],
    "events": [
      {
        "name": "ed-animation-cancel",
        "react": "onEdAnimationCancel",
        "description": "Emitted when the animation is canceled. Reports what already happened, so it is not cancelable."
      },
      {
        "name": "ed-animation-finish",
        "react": "onEdAnimationFinish",
        "description": "Emitted when the animation finishes. Reports what already happened, so it is not cancelable."
      },
      {
        "name": "ed-animation-start",
        "react": "onEdAnimationStart",
        "description": "Emitted when the animation starts or restarts."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<ed-animation>` elements."
      }
    ],
    "cssProperties": [],
    "parts": [],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/animation/animation.js';",
  "react": {
    "component": "EdAnimation",
    "import": "import EdAnimation from '@eurodata/eurodata-ui/dist/react/animation/index.js';"
  }
}