Creates an animation and applies it to the content. Powered by the [Web Animations API](https://mdn.io/web-animations-api). A wide range of animations is available [here](https://www.htmlplus.io/component/animation/names).

Fires when the [Animation.cancel()](https://mdn.io/animation-cancel)method is called or when the animation enters the "`idle`" play state from another state.

plusCancel

Fires when the animation finishes playing.

plusFinish

Fires when the animation is removed (i.e., put into an `active` replace state).

plusRemove

Clears all [keyframeEffects](https://mdn.io/keyframe-effect)caused by this animation and aborts its playback.

cancel

Commits the end styling state of an animation to the element being animated, even after thatanimation has been removed. It will cause the end styling state to be written to the elementbeing animated, in the form of properties inside a `style` attribute.

commitStyles

Seeks either end of an animation, depending on whether the animation is playing or reversing.

finish

pause

Explicitly persists an animation, when it would otherwise be removed due to the browser's[Automatically removing filling animations](https://developer.mozilla.org/en-US/docs/Web/API/Animation#automatically_removing_filling_animations)behavior.

persist

Starts or resumes playing of an animation, or begins the animation again if it previously finished.

play

Reverses playback direction, stopping at the start of the animation.If the animation is finished or unplayed, it will play from end to beginning.

reverse

Sets the speed of an animation after first synchronizing its playback position.

updatePlaybackRate

playbackRate

Determines how values are combined between this animation and other,separate animations that do not specify their own specific composite operation.

composite

The number of milliseconds to delay the start of the animation.

delay

Whether the animation runs forwards (`normal`), backwards (`reverse`),switches direction after each iteration (`alternate`), or runsbackwards and switches direction after each iteration (`alternate-reverse`).

direction

The number of milliseconds each iteration of the animation takes to complete.Keep in mind that your animation will not run if this value is 0.

duration

The rate of the animation's change over time.Accepts the pre-defined values "`linear`", "`ease`", "`ease-in`", "`ease-out`", and "`ease-in-out`",or a custom "`cubic-bezier`" value like "`cubic-bezier(0.42, 0, 0.58, 1)`".

easing

The number of milliseconds to delay after the end of an animation.This is primarily of use when sequencing animations based on the end time of another animation.

endDelay

Dictates whether the animation's effects should be reflected by the element(s)prior to playing ("`backwards`"), retained after the animation has completedplaying ("`forwards`"), or `both`.

fill

The [Animation](https://mdn.io/api-animation) object instance.

instance

Determines how values build from iteration to iteration in this animation.Can be set to `accumulate` or `replace`.

iterationComposite

The number of times the animation should repeat. And can also take a value of[Infinity](https://mdn.io/infinity)to make it repeat for as long as the element exists.

iterations

Describes at what point in the iteration the animation should start.0.5 would indicate starting halfway through the first iteration for example,and with this value set, an animation with 2 iterations would end halfway througha third iteration.

iterationStart

A [keyframes](https://mdn.io/keyframe-formats)object or `null`.

keyframes

Specifies what kind of animation will play.The list of available animations is [here](/component/animation/names).

name

# Animation

Creates an animation and applies it to the content. Powered by the [Web Animations API](https://mdn.io/web-animations-api). A wide range of animations is available [here](https://www.htmlplus.io/component/animation/names).

<Playground />

<Usage />

<Api />

<GlobalConfig />

<Examples />

### Default

<Example {...(example["default"] || {})} />

### Name

To see all names click [here](https://www.htmlplus.io/component/animation/names).
<Example {...(example["name"] || {})} />

### Duration

<Example {...(example["duration"] || {})} />

### Easing

To see all easings click [here](https://github.com/htmlplus/core/blob/main/src/components/animation/animation.constants.ts).
<Example {...(example["easing"] || {})} />

### Methods

<Example {...(example["methods"] || {})} />

### Keyframes

<Example {...(example["keyframes"] || {})} />

### Register A Custom Name

<Example {...(example["register-a-custom-name"] || {})} />

### Button

<Example {...(example["button"] || {})} />

### Intersection

<Example {...(example["intersection"] || {})} />

<LastModified value="2023-05-20T13:41:49.734Z" value="2023-05-20T13:41:49.734Z" value="2023-05-20T13:41:49.734Z" />


default

Animation

Download

Github

CodeSandbox

import { Animation, Center } from '@htmlplus/react';
import '@htmlplus/core/animation/names/attention-seekers/tada.js';
const AnimationButton = () => {
  return (
    <Center>
      <Animation id="animation1" name="tada">
        <button onClick={() => (window.animation1.run = true)}>Click Me</button>
      </Animation>
    </Center>
  );
};
export default AnimationButton;


Script

plus-animation {
  display: inline-block;
}


Style

Button

import { Animation, Center } from '@htmlplus/react';
const AnimationDefault = () => {
  return (
    <Center>
      <Animation iterations="Infinity" name="fade-in" run></Animation>
    </Center>
  );
};
export default AnimationDefault;


plus-animation {
  background: lightgray;
  width: 100px;
  height: 100px;
}


Default

import { Animation, Center } from '@htmlplus/react';
const AnimationDuration = () => {
  return (
    <Center>
      <Animation
        duration="2500"
        iterations="Infinity"
        name="fade-in"
        run
      ></Animation>
    </Center>
  );
};
export default AnimationDuration;


Duration

import { Animation, Grid } from '@htmlplus/react';
import '@htmlplus/core/animation/names/fading-exits/fade-out-down.js';
const AnimationEasing = () => {
  return (
    <>
      <Grid justifyContent="evenly" gutter="md">
        <Grid.Item xs="12" sm="auto">
          <Animation
            easing="linear"
            iterations="Infinity"
            name="fade-out-down"
            run
          ></Animation>
        </Grid.Item>
        <Grid.Item xs="12" sm="auto">
          <Animation
            easing="ease-in"
            iterations="Infinity"
            name="fade-out-down"
            run
          ></Animation>
        </Grid.Item>
        <Grid.Item xs="12" sm="auto">
          <Animation
            easing="cubic-bezier(0.25, 0.50, 0.25, 0.50)"
            iterations="Infinity"
            name="fade-out-down"
            run
          ></Animation>
        </Grid.Item>
      </Grid>
      <br />
      <br />
      <br />
    </>
  );
};
export default AnimationEasing;


plus-animation {
  background: lightgray;
  width: 100px;
  height: 100px;
  margin: auto;
}


Easing

import { useState } from 'react';
import { Animation, Intersection } from '@htmlplus/react';
import '@htmlplus/core/animation/names/attention-seekers/heart-beat.js';
const AnimationIntersection = () => {
  const [run, setRun] = useState(false);
  const onChange = (event) => {
    setRun(event.detail.isIntersecting);
  };
  return (
    <div className="container">
      <Intersection onChange={(event) => onChange(event)}>
        <Animation name="heart-beat" run={run}></Animation>
      </Intersection>
    </div>
  );
};
export default AnimationIntersection;


plus-animation {
  background: lightgray;
  width: 100px;
  height: 100px;
  margin: auto;
}
plus-intersection {
  display: block;
  text-align: center;
  margin: 1000px auto;
}
.container {
  position: relative;
  height: 20rem;
  overflow: auto;
  background-color: whitesmoke;
}


Intersection

import { Animation } from '@htmlplus/react';
const AnimationKeyframes = () => {
  let keyframes = [
    {
      transform: 'scale(0) rotate(0deg) translate(-50%, -50%)',
      opacity: '1'
    },
    {
      transform: 'scale(7) rotate(960deg) translate(-50%, -50%)',
      opacity: '0'
    }
  ];
  return (
    <div className="root">
      <Animation
        duration="5000"
        iterations="Infinity"
        keyframes={keyframes}
        run
      ></Animation>
    </div>
  );
};
export default AnimationKeyframes;


.root {
  padding: 5rem 0;
  position: relative;
}
plus-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border: solid 1px red;
  transform-origin: top left;
}


Keyframes

import { Animation, Center } from '@htmlplus/react';
const AnimationMethods = () => {
  return (
    <>
      <Center>
        <Animation id="animation4" iterations="3" name="fade-out"></Animation>
      </Center>
      <br />
      <Center>
        <button onClick={() => window.animation4.cancel()}>Cancel</button>
        <button onClick={() => window.animation4.finish()}>Finish</button>
        <button onClick={() => window.animation4.pause()}>Pause</button>
        <button onClick={() => window.animation4.play()}>Play</button>
      </Center>
    </>
  );
};
export default AnimationMethods;


button {
  margin: 0 0.5rem;
}
plus-animation {
  background: lightgray;
  width: 100px;
  height: 100px;
}


Methods

import { Animation, Grid } from '@htmlplus/react';
import '@htmlplus/core/animation/names/flippers/flip-in-x.js';
import '@htmlplus/core/animation/names/flippers/flip-in-y.js';
const AnimationName = () => {
  return (
    <Grid justifyContent="evenly" gutter="md">
      <Grid.Item xs="12" sm="auto">
        <Animation iterations="Infinity" name="flip-in-x" run></Animation>
      </Grid.Item>
      <Grid.Item xs="12" sm="auto">
        <Animation iterations="Infinity" name="flip-in-y" run></Animation>
      </Grid.Item>
    </Grid>
  );
};
export default AnimationName;


Name

import { Animation, Avatar, Center } from '@htmlplus/react';
const AnimationRegisterACustomName = () => {
  return (
    <Center>
      <Avatar shape="circle">
        <Animation
          delay="0000"
          duration="2000"
          iterations="Infinity"
          name="custom-pulse"
          run
        ></Animation>
        <Animation
          delay="1000"
          duration="2000"
          iterations="Infinity"
          name="custom-pulse"
          run
        ></Animation>
        <img src="https://picsum.photos/id/64/90/90" />
      </Avatar>
    </Center>
  );
};
export default AnimationRegisterACustomName;


plus-avatar {
  margin: 1.5rem;
}
plus-animation {
  border: solid 3px black;
  display: inline-block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -1;
}


import { setConfig } from '@htmlplus/core/config.js';

setConfig({
  asset: {
    animation: {
      'custom-pulse': [
        { offset: 0, opacity: '0.6', transform: 'scale(1.00)' },
        { offset: 1, opacity: '0.0', transform: 'scale(1.60)' }
      ]
    }
  }
});