css 2 transitions on one property

Question

I have a div that it's style is like this:

{
   background-color: white;
   transition: background-color 0.3 linear;
}

and I want to do this:

$(".div").css("background-color", "orange");
$(".div").css("background-color", "white");

I want the div to become orange in 0.3 seconds and become white again in another 0.3 seconds. what should I do?

Answer 1

You don't need to use jQuery, you can use CSS3 Animation to achieve this.

Working example:

div {
    width: 100px;
    height: 100px;
    background-color: white;
    -webkit-animation: changeColor .9s linear;
    -moz-animation:changeColor .9s linear;
    animation:changeColor .9s linear;
}

@-webkit-keyframes changeColor {
    0% {background-color: white;}
    50% {background-color: orange;}
    100% {background-color: white;}
}
@-moz-keyframes changeColor {
    0% {background-color: white;}
    50% {background-color: orange;}
    100% {background-color: white;}
}
@keyframes changeColor {
    0% {background-color: white;}
    50% {background-color: orange;}
    100% {background-color: white;}
}

<div></div>

Answer 2

Looks like a great reason to use animate():

$(".div").animate({"background-color", "orange"},300).delay(300).animate({"background-color", "white"},300);

Answer 3

Use Transition

HTML

<div class="divObject"></div>

CSS

div.divObject {
    background-color: #ffffff;
    transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    -webkit-transition: background-color 0.3s linear;
}
div.animated {
    background-color: #ff0000;
}

JavaScript

$(document).ready(function() {
    $('.divObject').addClass('animated');
});