CSS3 Background Transition Test Suite

by sapegin

HTML

<div class="b1"></div> <div class="b2"></div>
<div class="b3"></div> <div class="b4"></div>

CSS

div {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
    display: inline-block;
}
div:hover {
    background: green;
}
.b3, .b4 {
    background-image: -webkit-gradient(linear, left top, left bottom, from(orange), to(red));
    background-image: -webkit-linear-gradient(top, orange, red);
    background-image: -moz-linear-gradient(top, orange, red);
    background-image: -ms-linear-gradient(top, orange, red);
    background-image: -o-linear-gradient(top, orange, red);
    background-image: linear-gradient(top, orange, red);
}
.b3:hover, .b4:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(blue), to(green));
    background-image: -webkit-linear-gradient(top, blue, green);
    background-image: -moz-linear-gradient(top, blue, green);
    background-image: -ms-linear-gradient(top, blue, green);
    background-image: -o-linear-gradient(top, blue, green);
    background-image: linear-gradient(top, blue, green);    
}

.b1, .b3 {
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}
.b2 {
    -webkit-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    transition: background-color 1s linear;
    
}
.b4 {
    -webkit-transition: background-image 1s linear;
    -moz-transition: background-image 1s linear;
    -o-transition: background-image 1s linear;
    transition: background-image 1s linear;   
}