¿Cómo puedo hacer que un o un circulo dibujado con css se vea y oculte pero sin el efecto suavizado que da el hacerlo con animation?
Que sea como una luz se ve o no se ve y parpadea constantemente.
No quiero que se encienda suavemente y se apague suavemente. Necesito que aparezca bruscamente en 3 posiciones.
A continuación, mi código:
.triangulo {
width: 0;
height: 0;
position: relative;
left: 85px;
/*bottom: 15px;*/
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 25px solid #b10c0c;
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
}
@keyframes slidein {
0%{border-bottom: 25px solid #b10c0c; left: 85px;}
1%{border-bottom: 25px solid transparent; left: 85px;}
30%{border-bottom: 25px solid #b10c0c; left: 200px;}
31%{border-bottom: 25px solid transparent; left: 200px;}
50%{border-bottom: 25px solid #b10c0c; left: 320px;}
51%{border-bottom: 25px solid transparent; left: 320px;}
}
<div class="triangulo">
</div>