Serendip

Web Studio

webkit 系のブラウザで、CSS Animation を利用して、hover 時にハイライトしてからアニメーションでフェードアウトさせる。

デモ（CSS でテーブルの行をハイライトしてからアニメーションで元の色に）

.odd {
    background-color: rgb(230, 230, 240);
}
.even {
    background-color: rgb(240, 240, 220);
}
@-webkit-keyframes tr_odd_color {
    0% {
        background-color: rgb(255, 200, 200);
    }
    40% {
        background-color: rgb(230, 230, 240);
    }
    100% {
        background-color: rgb(230, 230, 240);
    }
}
@-webkit-keyframes tr_even_color {
    0% {
        background-color: rgb(255, 200, 200);
    }
    40% {
        background-color: rgb(240, 240, 220);
    }
    100% {
        background-color: rgb(240, 240, 220);
    }
}
.odd:hover,
.even:hover {
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
}
.odd:hover {
    -webkit-animation-name: tr_odd_color;
}
.even:hover {
    -webkit-animation-name: tr_even_color;
}

参考：Surfin’ Safari – Blog Archive » CSS Animation