Imiter un blink tag avec des animations CSS3

Question

Imiter un blink tag avec des animations CSS3

je veux vraiment faire un morceau de texte clignoter le style de l'ancienne école sans utiliser javascript ou texte-décoration.

Pas de transitions, seulement *blink*, *blink*, *blink*!

éditer : c'est différent de cette question parce que je demande clignotant sans transitions continues, tandis que L'OP des autres questions demande remplacer clignotant par

129

blink css css-animations css3 html

demandé sur Community 2012-12-19 19:02:54

9 réponses

score 204 · Answer 1

la Netscape originale <blink> avait un cycle de service 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 pouvez trouver plus d'informations sur Animations Keyframe ici .

score 76 · Answer 2

laissez-moi vous montrer un petit truc.

comme Arkanciscan dit , vous pouvez utiliser les transitions CSS3. Mais sa solution semble différente de l'étiquette originale.

ce que vous devez vraiment faire est ceci:

@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 Démo

score 42 · Answer 3

essayez cette 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/vendeur: http://jsfiddle.net/es6e6/1 / .

score 25 · Answer 4

il n'y a en fait pas besoin de visibility ou opacity - vous pouvez simplement utiliser color , qui a l'avantage de garder n'importe quel "clignement" au texte seulement:

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 /

score 9 · Answer 5

je vais en enfer :

=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)

score 6 · Answer 6

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>

score 1 · Answer 7

ça marche dans mon cas texte clignotant à 1s 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; }
}

score -3 · Answer 8

si vous voulez un peu d'effet de lueur utiliser ce

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

score -5 · Answer 9

s'il vous plaît 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>

Las etiquetas más populares

Imiter un blink tag avec des animations CSS3

9 réponses