Skip to main content

Forums

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #188269
    noahgelman
    Participant

    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.

    I am looking for a strictly CSS solution. I’m perfectly aware how to do it in javascript. I don’t have a site to link to.

    #188271
    Paulie_D
    Moderator

    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.

    #188280
    noahgelman
    Participant

    Ok, here is a codepen.io of a simple click on a div. It move and rotate the div.

    http://codepen.io/anon/pen/ZYEKbj

    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?

    #188281
    TheDoc
    Moderator

    Do you want it to happen all in one motion? If so, you’ll want CSS animations, not transitions.

    #188282
    TheDoc
    Moderator

    Specifically, you’ll want the power of keyframes.

    #188283
    noahgelman
    Participant

    @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?

    #188284
    TheDoc
    Moderator
    #188285
    noahgelman
    Participant

    BOOM.

    You are a wizard Doc.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.