Imiter une balise clignotante avec des animations CSS3

Je veux vraiment faire clignoter un morceau de texte dans le style old-school sans utiliser de javascript ou de décoration de texte.

Pas de transitions, seulement * clignotement *, * clignotement *, * clignotement *!

EDIT : C'est différent de cette question parce que je demande un clignotement sans transitions continues, alors que OP des autres questions demande comment remplacer le clignotement par des transitions continues

Le Netscape original <blink>avait un cycle de service de 80%. Cela est assez proche, bien que le réel <blink>n'affecte que le texte:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

This is <span class="blink">blinking</span> text.

Vous pouvez trouver plus d'informations sur les animations d'images clés ici .

Laissez-moi vous montrer un petit truc.

Comme l'a dit Arkanciscan , vous pouvez utiliser des transitions CSS3. Mais sa solution est différente de la balise d'origine.

Voici ce que vous devez vraiment faire:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}

<span class="blink">Blink</span>

Démo JSfiddle

Essayez ce CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

This is <span class="blink">blink</span>

Vous avez besoin de préfixes spécifiques au navigateur / fournisseur: http://jsfiddle.net/es6e6/1/ .

En fait, il n'y a pas besoin de visibilityou opacity- vous pouvez simplement utiliser color, ce qui a l'avantage de ne laisser "clignoter" que le texte:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, <blink>this text will blink</blink>, this will not.

Violon: http://jsfiddle.net/2r8JL/

Je vais en enfer pour ça:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (sass avec bourbon)

Une autre variation

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

This is <span class="blink">blink</span>

Cela fonctionne dans mon cas, le texte clignotant à 1 seconde d'intervalle.

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}

si vous voulez un effet lumineux, utilisez ceci

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

Veuillez trouver ci-dessous la solution pour votre code.

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>