How to make this animation in javascript?

  • 0
    There is animation:
    @keyframes pulse {
      0% {
        transform: scale(1.25);
        opacity: 1;
      }
    
      25% {
        transform: scale(1);
        opacity: 1;
      }
    
      30% {
        transform: scale(1.05);
        opacity: 1;
      }
    
      to {
        transform: scale(.85);
        opacity: 0;
      }
    }


    How can I make the exact same animation in javascript?
    JavaScript Anonymous, Apr 9, 2020

  • 1 Answers
  • 0
    Using the native animate method, something like this:

    element.animate(
    [
    { transform: 'scale(1.25)', opacity: 1},
    { transform: 'scale(1)', opacity: 1, offset: 0.25 },
    { transform: 'scale(1.05)', opacity: 1, offset: 0.3},
    { transform: 'scale(0.85)', opacity: 0}
    ],
    2000
    );


    Note, however, that this is an experimental API and does not work in all browsers. If deep support is needed, use jQuery animate
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!