Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I start CSS3 Animations at a specific spot?

I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes):

@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}

then I would like to be able to stop the animation, and move it to the 50% mark. I guess that the ideal JavaScript would look something like this:

var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';

Does anyone know of a way to make this happen (hopefully in Webkit)?

like image 980
Joel A. Shinness Avatar asked May 10 '12 19:05

Joel A. Shinness


People also ask

Can you animate position CSS?

you have to declare your keyframe outside the css selector, as well as animate an absolutely positioned element. Show activity on this post. To animate with left , top , bottom or right , you either have to have a absolutely positioned or floated element. SO, Change the position to absolute .

How do you trigger an animation in CSS?

To trigger CSS animations in JavaScript, we just add the class that is set to animate the keyframes in CSS. We add the @keyframes property with the animation we want to animate. It'll animate from the from styles to the to styles.

How do I change the animation position in HTML?

Short answer: You can't animate position. Instead of applying position: fixed through keyframes try to add a class fixed or something via javascript. Alternative you could move the element with transform: translate but it won't be fixed.


1 Answers

We can use the animation-delay property. Usually it delays animation for some time, and, if you set animation-delay: 2s;, animation will start two seconds after you applied the animation to the element. But, you also can use it to force it to start playing animation with a specific time-shift by using a negative value:

.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/

like image 116
Jose Rego Avatar answered Nov 01 '22 10:11

Jose Rego