How could my animations end without flicker???

[patrick clancey]

I have a number of animations which zoom and/or fade out elements and I'm getting a lot of flicker on animation end in more recent Chrome releases.

Basically, I'm zoom/fading elements out when necessary by doing something like this...

css; 

  *.closed {display:none};

  #div {-webkit-animation-iteration-count:1;-webkit-animation-timing-function:linear;-webkit-animation-duration:0.33s;}

  @-webkit-keyframes zoomOut{0%{-webkit-transform:scale(1) skew(0deg) rotate(0)}100%{-webkit-transform:scale(0) skew(40deg) rotate(-6deg)}}

  ...

js;

var div = document.getEl... ,

      bttn = document.getEl... ; 

div.addEventListener("webkitAnimationEnd",function(){

if (this.className.match("closing")){

                this.className = "closed";

} else {

                this.className = "open";

        }

this.style.webkitAnimationName = "";

},false)

bttn.addEventListener("click",function(){

        if (div.className.match("active")){

                return;

        } else if (div.className.match("open")){

div.className = "closing active";

                div.style.webkitAnimationName = "zoomOut";

} else if (div.className.match("closed")){

div.className = "opening active";

                div.style.webkitAnimationName = "zoomIn";

        }

},false)

  

It all works fine but as animation will reset the element to it's original state before firing the animation-end event it gives a nasty flicker.

 

Is there a better way of doing this? 

thanks 

[PhistucK]

I have not analyzed the code, but it seems like most of what you want to do can be done with plain CSS and no JavaScript, which might also solve your problem.

Put the animation names inside of the classes and use :focus or :active, for example.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-html5/-/88SB-JFOes8J.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

[Slavomir Kaslev]

Set '-webkit-animation-fill-mode: forwards;' to your #div to make it stay on the last frame of the animation after it ends. That should remove the flickering.

[patrick clancey]

Fantastic, thanks!

https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

p