How to chain multiple -webkit-transition animations in my css without keyframes


Tags: css,animation,css3,webkit,css-animations

Problem :

I'm trying to chain multiple -webkit-transition animations in my css without keyframes.

I know that is possible if I call a keyframe animation, but I just want to overwrite the proprieties and something in this JS doesn't work:

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

Here is the fiddle: http://jsfiddle.net/a2co/Tn9mT/25/



Solution :

In your fiddle the element also gets a visibility:hidden. I think jQuery tries to be smart. Change 0 with 0.01.


    CSS Howto..

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    How to manage assets for modern/ancient browsers

    How to change the scroll-bar style in css [duplicate]

    How can I simplify this JavaScript code

    How to set this CSS arrow transparent?

    How granular are CSS rem units?

    How to scale content for displays keeping the ratio [closed]

    How does one customize the appearance of jquery.perfect-scrollbar?

    Not sure how to use css selectors

    how to color the whole star icon when button is clicked

    How to Apply CSS Style Code into My Custom TextView in Android

    What's the proper way to name CSS selectors. It seems inconsistent how it works [duplicate]

    How to have different alignments in one div(nav)?

    How to Resize Unicode Characters via CSS

    How to explain CSS clear property? [duplicate]

    How to pull css properties along with html content in Ajax?

    How to prevent CSS block elements from affecting parent inline-blocks

    JavaFx how to align only one column-header in tableview?

    How to apply custom CSS on Facebook comment box plugin

    How to keep css animation effect?

    How can I write CSS with jQuery (or JS) to apply to current and future matches?

    How to prevent line breaks in list items using CSS

    When using WebFont loader, how to hardcode the css?

    how to set individual scroll for content and left menu

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    How to make div css background hover

    How to create a WoW-like cooldown effect?

    How to write CSS code without using :not selector?

    How do I programmatically change the CSS link for HTML files in C#?

    SASS: How to exclude part of selector