Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<div id="element"></div>
 
#element {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: blue;
}
 
// Keyframe list syntax
// --------------------
// Keyframes can be specified as a list of multiple CSS property values.
// Individual keyframes can be given specific offsets and easings.
// Not all properties need to be specified in every keyframe.
// Offsets are implicitly distributed if not specified.
element.animate([
  {
    background: 'red',
    transform: 'none',
    easing: 'ease-out',
  },
  {
    offset: 0.1,
    transform: 'translateY(100px)',
    easing: 'ease-in-out',
  },
  {
    offset: 0.2,
    transform: 'translate(100px, 100px)',
    easing: 'ease-in-out',
  },
  {
    offset: 0.4,
    transform: 'translateX(100px)',
    easing: 'ease-out',
  },
  {
    background: 'blue',
    transform: 'none',
  },
], {
  duration: 4000,
  iterations: Infinity,
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers