reset animation

Newsgroups	comp.lang.javascript
From	Andrew Poulos <ap_prog@hotmail.com>
Subject	reset animation
Date	2020-06-25 15:50 +1000
Message-ID	<d6-dnSDP_KnfpmnDnZ2dnUU7-L_NnZ2d@westnet.com.au> (permalink)

Show all headers | View raw

I have an img which, on hover, some CSS animates

     @keyframes pan {
       0% {
         transform: translate(0, 0);
       }
       25% {...
     }

When the mouse move out I need the img to smoothly move back to its 
initial position. I've tried various things to no avail. The latest I 
tried is this:

document.querySelector('img'.addEventListener('mouseout', ev => {
   ev.target.style.animationPlayState = "paused";

   let elem = window.getComputedStyle(ev.target, null);
   ev.target.style.transform = elem.getPropertyValue("transform");
   ev.target.style.animation = "none";

   ev.target.style.transition = "all 1s";
   ev.target.style.transform  = "translate(0, 0)";
});

but the img snaps back to it's initial position. How can I get this to 
smoothly return the img to it's initial position?

Andrew Poulos

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 15:50 +1000
  Re: reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 17:13 +1000
  Re: reset animation "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-06-25 01:15 -0700
    Re: reset animation Andrew Poulos <ap_prog@hotmail.com> - 2020-06-25 19:08 +1000
      Re: reset animation "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-06-25 11:15 -0700

csiph-web