I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop.
According to CSS specifications, the "visible" property is animatable only as "visible." This means there can't be a smooth transition like a fade in and out; I simply want the DIVs to blink on and off. However, my current code isn't working as intended - the DIVs remain constantly visible without any flickering or blinking occurring.
Can anyone provide insight into why this might be happening?
<style type="text/css">
.shape{
width:36px;
height:36px;
position:absolute;
border-radius:18px;
box-shadow: 0px 0px 5px 5px rgba(217, 215, 30, 0.5);
visibility:visible;
}
.star-anim1 {
animation-name:blink;
animation-direction:normal;
animation-delay:5sg;
animation-duration:5s;
animation-iteration-count:infinite;
}
.star1{
top:80px;
left:60px;
}
.star2{
right:30px;
top:60px;
}
@keyframes blink{
from{
visibility:hidden;
}
to{
visibility:visible;
}
}
</style>
</head>
<body>
<div class="container" style="position:relative;">
<div class="star-anim1 shape star1"></div>
<div class="star-anim1 shape star2"></div>
</div>