CODEWITHSUNDEEP
javascriptanimationcsshardware-acceleration
Ninjabiscuit
Ninjabiscuit

Reputation: 134

Increasing the speed of hardware accelerated css3 animation

I am trying to increase the animation duration dynamically during a css3 animation that uses hardware acceleration. Using javascript and non hardware accelerated css3, I just increased the animation duration and the animation would speed up. Now that I am using translate3d instead of the left property to animate, increasing the animation duration does not work. I have a feeling that once the animation is offloaded to the GPU changes to the css do no effect it. I need some way of forcing an update to the animation to for the GPU when I've made a change.

Here is my css. 

@-webkit-keyframes gofast {
 from {
   -webkit-transform: translate3d(0,0,0);
 }
 to {
   -webkit-transform: translate3d(-10240px,0,0);
 }
}

.makeMeFast {
  position:absolute;
  top:0px;
  z-index:0;
  width:12288px;

  -webkit-animation-name: gofast;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

Is there some known way of doing this, am I missing something obvious, or can it just not be done?

Any help would be very much appreciated.

Thanks

Upvotes: 0

Views: 1940

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

I think this is just a limitation of the current hardware acceleration implementations. Once the animation starts, off it goes.

(Folk wisdom - it's said to be a bad idea to give very large dimensions (aka width: 13000px) to blocks that you want to animate - it makes the GPU create huge objects)

Upvotes: 2

Related Questions