js add animation to element code example

Example 1: js add animation to element

document.getElementById('test').style.animation = 'fading 2s infinite'

Example 2: js add animation to element

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

Example 3: js add animation to element

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

Example 4: js add animation to element

#test {
    background-color: blue;
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-animation: fading 5s infinite;
    animation: fading 5s infinite;
}

/* Here is the animation (keyframes) */
@keyframes fading {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

Example 5: js add animation to element

var animation = element.animate(keyframes, options);

Example 6: js keyframe

< script  src = ' /path/to/jquery.keyframes [.min ] .js ' > </ script >