animejs code sample for keyframe property 1

animejs code sample for keyframe property

anime({
  targets: '.animation-keyframes-demo .el',
  keyframes: [
    {translateY: -40},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0},
    {translateY: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)',
  loop: true
});

Here is what the above code is Doing:
1. We’re targeting the .el element.
2. We’re defining an array of keyframes.
3. We’re setting the duration to 4000ms.
4. We’re setting the easing to easeOutElastic.
5. We’re setting the loop to true.

Similar Posts