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


Tags: jquery,css,css3,css-animations

Problem :

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



Solution :

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

    CSS Howto..

    How to set border to 0 in this table

    How to create this border styles in HTML/CSS? [closed]

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    CSS: how to make label appear right of the radio?

    How to get and extract matched css rules on dom-node?

    How to don't include the google font css in one specific button only?

    Rails 4: how to apply custom CSS to Rails form file field

    How to customize the size of JCoverFlip?

    How to select label for=“email” in CSS?

    How do you find the largest font size that won't break a given text?

    How to use sass (scss) compared to css

    How to make a website look like a Windows Office application? [closed]

    How to put CSS content in select box and rotate it?

    How to convert all color code #XXYYZZ to shorter 3 character version #XYZ of whole css file?

    How to animate image swap on hover

    How can I make my form take only a limited space?

    How to properly separate pages in jQuery Mobile?

    How to output element.style.marginTop using digits only?

    How to remove the border on the hover element in nvd3

    Position relative, how to get rid of dead space?

    How can I use javascript or jQuery to make this table fill available width and height?

    html css - how to create multiple column list?

    Click radio button then show submit button

    Showing only one row of items with css independently of users resolution?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

    How to spread elements evenly (horizonatly)?

    How to create donut chart in pure css & svg

    How to do something like border-top-left-color. [CSS]

    How do I make part of a style element a function? (IE: color:$random instead of color:red)

    Show dropdown menu only when hovered on span in li