javascript animate timing options code example

Example 1: javascript animate elements

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

Example 2: 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; }
}

Tags:

Css Example