Question

http://jsfiddle.net/cD4Gr/4/

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 %)

Answer 1

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'});
    }
});