- This topic is empty.
November 13, 2014 at 1:30 pm #188269
I have an absolutely positioned element.
Basically, I want to use a css transition to change it’s top/left value, pause, then move back again. Probably as a reaction to some event so no looping. Is this possible?
For example, it’s left value goes from 200px to 500px, pauses, then goes back to 200px.
Not to difficult…what have you tried?
Make a small demo with Codepen.io. for us to play with.
Just a first attempt at what it is you are after.
You haven’t mentioned what kind of ‘event’ would be required…because that will make a difference.
You say you know how to do it in JS….then you should have no issue with the CSS.November 13, 2014 at 3:16 pm #188280
Ok, here is a codepen.io of a simple click on a div. It move and rotate the div.
What I want to do is as the end of that transition, pause, and then change the height and rotate again.
What I can’t do is make it stop, and then adjust the top/left/rotate again inside the same effect.
I know I can do this with jquery animate on the click event, but I’m trying to do it just by switching classes on the element.
Can this be done?November 13, 2014 at 3:50 pm #188281
Do you want it to happen all in one motion? If so, you’ll want CSS animations, not transitions.November 13, 2014 at 3:50 pm #188282
Specifically, you’ll want the power of keyframes.November 13, 2014 at 3:52 pm #188283
@TheDoc, ultimately I want it to move, pause, move to a new location.
If I have to use animations then I will.
I don’t know much about css animations. Do you know how to do it with animations?November 13, 2014 at 3:57 pm #188284
Ya! It would look something like this: http://codepen.io/graygilmore/pen/8d8b41ed278d061764b3df531223a0e1November 13, 2014 at 4:03 pm #188285
You are a wizard Doc.
- You must be logged in to reply to this topic.