How to flash a div only - html

Question

Can I flash a div using only CSS? I would like this div to flash two colors.
.chat-window .msg-container-base .notification-message-unread{
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
}

Answer 1

Here you go:
.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>

Answer 2

For this you can use CSS keyframe animations.
.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>
In the .box class I'm using the animation property to link to an animation keyframe called animationFrames. I'm also defining how long I want this animation to play for, in the example above it's 5s and set to infinite so it repeats forever. The keyframe portion sets what CSS you want to apply to the animation at what percent in the animation, for example at 15% of 5 seconds it will turn red.
You can learn more about CSS keyframe animations here and here.
As per your specific example this code should work (I added a height property just so you could see it)
.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>