web-dev-qa-db-ja.com

CSS3トランジションは、色を追加してフェードアウトしたい

DIVの背景（背景色がない）を赤く点滅させてから、もう一度空白にします。これで、JSを使用して問題のDIVに新しいCLASS（赤を追加）を追加し、CSS3を使用して背景色にイージングを追加しました。しかし、それはそれを緩和します、私が欲しいのはそれが赤になってから緩和することです。 JSを使用して、遅延後に複数のCLassを追加することでこれを実行できると思います。しかし、CSS3を使用してこれを完全に行うことはできますか？

csscss-transitions
19
Purplemonkey

これを行う1つの方法は、jQuery UI animateメソッドを使用することです。このメソッドは、「通常の」jQuery animate（）を拡張して、background-colorなどに影響を与えます。

このような移行はcss3からへの移行が可能ですが、明らかにブラウザのサポートはそれほど広くありません。

#maDiv {
   -webkit-transition:background-color 0.5s linear;
   -moz-transition: background-color 0.5s linear;
   -o-transition: background-color 0.5s linear;
   height: 20px;
   width: 20px;
   background:#000;
}

#maDiv:hover {
    background: #ff0;
}

これにより、ユーザーがDivにカーソルを合わせると色が薄くなり、マウスが外れると0.5秒以上色が薄くなります。ブラウザサポートの詳細については、こちらの「css3トランジション」を参照してください： http://www.html5rocks.com/en/features/presentation

2
Daniel Hallqvist