Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

Question

Le Code:

$j(document).bind('click', function() { 
    $j("#test").css({ bottom:0px })
    });

Looking in the inspector, even when the element is at the top of the page, it still says it's bottom value is 0.

Maybe I need to play the animation in reverse somehow? or play a different animation? (Using Bottom %, rather than top %)

Your fiddle didn't work for me, but there is an event that is fired you can bind to when an animation ends. — chovy, Oct 28 '11 at 18:13
Regarding your % vs px question, I'm pretty sure that if your value is 0, you don't have to specify units. Maybe that's only true in straight CSS. — RustyTheBoyRobot, Oct 28 '11 at 18:27
@Chovy, I'm using webkit animations. Make sure you try a webkit browser. — NullVoxPopuli, Oct 28 '11 at 18:29
I don't really understand what you mean about the animation. Your example has no animation. The div just appears at the bottom of the page as I would expect from your code. — RustyTheBoyRobot, Oct 28 '11 at 18:34
@RustyTheBoyRobot, I'm using webkit CSS animations. For testing purposes I don't bother using CSS properties for all browsers until I get the desired effect. — NullVoxPopuli, Oct 28 '11 at 18:39

score 3 · Accepted Answer · answered Oct 28 '11 at 18:56

As you were thinking you can make a second keyframe block to reset it back to the bottom:

@-webkit-keyframes reset_to_bottom {
    0%, 100% {
        top: auto;
        bottom: 0;
        z-index: 1000000;
        opacity: 0.5;
    }
}

then have your jQuery change the animation name:

$j("#test").css({
    '-webkit-animation-name': 'reset_to_bottom'
});

jsfiddle

When using -webkit-animation-fill-mode: forwards; forwards will maintain the last keyframe styles, so top:0% is still set which is why bottom:0 was having no effect

for fun...switch between animation's each click

jsfiddle

$j(document).bind('click', function() {
    if ($j("#test").css('-webkit-animation-name') == "slide_to_top") {
        $j("#test").css({'-webkit-animation-name': 'reset_to_bottom'});
    } else {
        $j("#test").css({'-webkit-animation-name': 'slide_to_top'});
    }
});

score 0 · Answer 2 · answered Oct 28 '11 at 18:54

If I'm understanding the situation correctly, I think these modifications should fix your problem:

CSS:

#test {
  ...
  //bottom: 0px; //Remove this line
  top:100%;      //Replace with this
  ...
}

JavaScript:

//$j("#test").css({ bottom:0px })
$j("#test").css({ top:0 })

On a side note, I prefer using the jQuery animate() function rather than CSS for animations, mainly because it already has support for all major browsers. That way, I don't have to worry about including multiple CSS styles for different browsers.

Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?

2 Answers2

Linked