Create Intuitive Animations with JavaScript’s animate()

Japanese

Create Intuitive Animations with JavaScript’s animate()

CSS animations with animation and @keyframes are certainly possible, but using JavaScript’s animate() gives you finer control and more flexible expression.
JavaScript can also trigger animations in response to events, making it more intuitive than CSS when you want animations tied directly to user interactions.
For example, when creating motion based on events such as click, scroll, or hover, JavaScript’s animate() allows you to add smooth, dynamic effects.


    document.querySelector(".button").addEventListener("click", function(){
      let element = document.querySelector("selector of the element you want to animate");
      element.animate(keyframes, options);
    });

Options

delay:

The number of milliseconds to delay before the animation starts.

direction:

Specifies the direction and behavior of repeated animations:

'normal' : plays forward
'reverse' : plays backward
'alternate' : alternates, starting forward
'alternate-reverse' : alternates, starting backward

duration:

The number of milliseconds the animation takes to complete.

easing:

Controls the rate of change of the animation. Possible values include:

'linear' : linear interpolation
'ease' : starts slowly, accelerates, then slows toward the end
'ease-in' : starts slowly and accelerates until it stops abruptly at the end
'ease-out' : starts abruptly and slows toward the end
'ease-in-out' : starts slowly, speeds up, then slows toward the end
'step-start' : jumps immediately to the final state and stays there
Equivalent to 'steps(1, jump-start)' or 'steps(1, start)'
'step-end' : stays in the initial state until the end, then jumps to the final state
Equivalent to 'steps(1, jump-end)' or 'steps(1, end)'
'cubic-bezier(0.42,0,0.58,1)'

endDelay:

The number of milliseconds to delay after the animation finishes.

fill:

Determines whether the animation’s effects apply before and/or after playback:

'backwards' : applies the starting styles before the animation begins
'forwards' : retains the final styles after the animation ends
'both' : applies both backwards and forwards
'none' : applies no styles outside the animation

iterationStart:

Specifies at what point within the first iteration the animation should begin.
For example, iterationStart: 0.5 starts playback halfway through the first cycle.

iterations:

Number of times the animation repeats.
Default is 1. Use Infinity for endless repetition.

pseudoElement:

Allows the animation to target a pseudo‑element instead of the element itself.
For example, pseudoElement: "::before" applies the animation to the ::before pseudo‑element.

Samples

Animate Background (White → Black → White) and Text Color (Red → Green → Red)

This text will animate

<input type="button" onclick="ani1()" value="Start Animation">
<span id="ani1" style="font-weight:bold;font-size:18px;color:#ff0000;background:#fff;">
  This text will animate
</span>
<script>
  function ani1(){
    const ani1=document.querySelector("#ani1");
    ani1.animate(
      [
        {color:'#ff0000',background:'#fff'},
        {color:'#00ff00',background:'#000'},
        {color:'#ff0000',background:'#fff'},
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

Animate Opacity (1 → 0 → 1)

This text will animate

<input type="button" onclick="ani2()" value="Start Animation">
<span id="ani2" style="font-weight:bold;font-size:18px;color:#ff0000;background:#fff;">
  This text will animate
</span>
<script>
  function ani2(){
    const ani2=document.querySelector("#ani2");
    ani2.animate(
      [
        {opacity:1}, {opacity:0}, {opacity:1}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 1000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

360° Rotation Animation (rotateY)

This text will animate

<input type="button" onclick="ani3()" value="Start Animation">
<span id="ani3" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;">
  This text will animate
</span>
<script>
  function ani3(){
    const ani3=document.querySelector("#ani3");
    ani3.animate(
      [
        {transform: 'rotateY(0deg)'}, {transform: 'rotateY(360deg)'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

360° Rotation (rotateZ) and Scaling Animation [100% → 10% → 100%]

This text will animate

<input type="button" onclick="ani4()" value="Start Animation">
<span id="ani4" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;">
  This text will animate
</span>
<script>
  function ani4(){
    const ani4=document.querySelector("#ani4");
    ani4.animate(
      [
        {transform: 'scale(100%,100%) rotateZ(  0deg)'},
        {transform: 'scale( 10%, 10%) rotateZ(180deg)'},
        {transform: 'scale(100%,100%) rotateZ(360deg)'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
      }
    );
  }
</script>

Animate the ::before Pseudo‑Element

When you click the button, the decorative icon rotates and changes color.

← This part will animate

<input type="button" onclick="ani5()" value="Start Animation">
<span id="ani5" style="font-weight:bold;font-size:18px;color:#000;display:inline-block;position:relative;padding-left:1em;box-sizing:border-box;">
  ← This part will animate
</span>
<style>
  #ani5::before{
    content:"■";
    position:absolute;
    left:0;
  }
</style>
<script>
  function ani5(){
    const ani5=document.querySelector("#ani5");
    ani5.animate(
      [
        {transform: 'translate( 0.0em, 0.0em) rotateZ(  0deg)', color:'#000'},
        {transform: 'translate( 0.5em, 0.5em) rotateZ( 90deg)', color:'#f00'},
        {transform: 'translate( 0.0em, 0.0em) rotateZ(180deg)', color:'#0f0'},
        {transform: 'translate(-0.5em,-0.5em) rotateZ(270deg)', color:'#00f'},
        {transform: 'translate( 0.0em, 0.0em) rotateZ(360deg)', color:'#000'}
      ],{
        delay: 0,
        direction: 'normal',
        duration: 2000,
        easing: 'linear',
        endDelay: 0,
        fill: 'both',
        iterationStart: 0.0,
        iterations: 1,
        pseudoElement: "::before",
      }
    );
  }
</script>