CSSのみでdivをフラッシュすることはできますか？私はこのdivが2つの色を点滅させたいと思います。ここでdivをフラッシュする方法
.chat-window .msg-container-base .notification-message-unread{
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
}
あなたが行く：あなたはCSSのキーフレームアニメーションを使用することができます。このため
.notification-message-unread {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
display: block;
position: relative;
width: 200px;
height: 200px;
background-color: red;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
background-color: blue;
}
}<div class="notification-message-unread"></div>。私はanimationFramesと呼ばれるアニメーションのキーフレームにリンクするanimationプロパティを使用してい.boxクラスで
.box {
height: 500px;
width: 500px;
animation: animationFrames 5s infinite;
}
@keyframes animationFrames{
0% {
background-color: blue;
}
15% {
background-color: red;
}
30% {
background-color: orange;
}
45% {
background-color: purple;
}
60% {
background-color: green;
}
75% {
background-color: pink;
}
100% {
background-color: black;
}
}
<div class="box"></div>。私はまた、このアニメーションを再生する時間を定義しています。上の例では、それは5sで、infiniteに設定されていますので、永遠に繰り返されます。キーフレーム部分は、アニメーションに適用するCSSをアニメーションの何パーセントで設定するかを設定します。たとえば、5秒の15％で赤になります。
CSSキーフレームアニメーションの詳細については、hereおよびhereを参照してください。
は、このコードは動作するはずです、あなたの具体的な例を1として
.chat-window {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
animation: animationFrames 2s infinite;
height: 500px;
}
@keyframes animationFrames{
50% {
background-color: orange;
}
}<div class="chat-window"></div>
あなたは@ keyframes' – Morpheus
が必要なのか 'CSSを使用してアニメーションを作成します（私はあなたがそれを見ることができるだけのように、高さプロパティを追加しました）それは停止することなく2つの色の間で点滅を続けますか？ – Andrea
私はこれが重複していると思います：https://stackoverflow.com/questions/13768706/css3-animation-change-continuously – Andrea