web-dev-qa-db-fra.com

Imiter une balise de clignotement avec des animations CSS3

Je veux vraiment faire clignoter le style de la vieille école sans utiliser javascript ou text-decoration.

Aucune transition, seulement * clignotement *, * clignotement *, * clignotement *!

EDIT: Ceci est différent de cette question car je demande de clignoter sans transitions continues, alors que OP des autres questions demande comment remplacer le clignotement par des transitions continues

htmlcsscss3css-animationsblink
140
m93a

Le Netscape <blink> d'origine avait un rapport cyclique de 80%. Ceci est assez proche, bien que le vrai <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 trouverez plus d’informations sur Animations d’images clés ici .

226
Neil

Laissez-moi vous montrer un petit truc.

En tant qu'Arkanciscan dit , vous pouvez utiliser les transitions CSS3. Mais sa solution semble 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>

JSfiddle Demo

83
m93a

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/au fournisseur: http://jsfiddle.net/es6e6/1/ .

46
Belyash

Il n'y a en fait aucun besoin de visibility ou opacity - vous pouvez simplement utiliser color, ce qui a l'avantage de garder n'importe quel "clignotement" du 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/

30
S.B.

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)

11
airtonix

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>
6
Alexander Sofin

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; }
}
1
Ajay Kumar