Use the alternate value for animation-direction (and you don't need to add any keframes this way).
alternateThe animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an ease-in animation is replaced with an ease-out animation when played in reverse. The count to determinate if it is an even or an odd iteration starts at one.
CSS:
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker { to { opacity: 0; } }
I've removed the from keyframe. If it's missing, it gets generated from the value you've set for the animated property (opacity in this case) on the element, or if you haven't set it (and you haven't in this case), from the default value (which is 1 for opacity).
And please don't use just the WebKit version. Add the unprefixed one after it as well. If you just want to write less code, use the shorthand.
.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker { to { opacity: 0; } }
.waitingForConnection2 {
animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;
}
@keyframes blinker2 { to { opacity: 0; } }
.waitingForConnection3 {
animation: blinker3 1s ease-in-out infinite alternate;
}
@keyframes blinker3 { to { opacity: 0; } }<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>