Imiter une balise de clignotement avec des animations CSS3

Question

Je veux vraiment faire clignoter un morceau de texte dans le style old-school sans utiliser javascript ni text-decoration.

Pas de transitions, seulement *clignotant*, *clignotant*, *clignotant*!

---

C'est différent de cette questioncar je demande un clignotement sans transitions continues, tandis que l'auteur de l'autre question demande comment remplacer le clignotement par des transitions continues.

Answer 1

L'original de Netscape avait un cycle de devoir de 80%. Cela s'en approche assez, bien que le vrai 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;
  }
}

Ceci est du texte clignotant.

Vous pouvez trouver plus d'informations sur les animations de trame clé ici.

Answer 2

Laissez-moi vous montrer un petit truc.

Comme l'a dit Arkanciscan ici, vous pouvez utiliser des transitions CSS3. Mais sa solution semble différente de la balise originale.

Ce que vous devez vraiment faire est ceci :

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

Clignoter

Démo JSfiddle

Answer 3

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;
} 

Ceci est clignoter

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

Answer 4

En réalité, il n'est pas nécessaire d'utiliser la visibility ou l'opacity - vous pouvez simplement utiliser la color, qui a l'avantage de limiter le "clignotement" au texte uniquement :

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; } }

Voici un peu de texte, ce texte clignotera, celui-ci ne clignotera pas.

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

Answer 5

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)