Imiter une balise clignotante avec des animations CSS3

Je veux vraiment faire en sorte qu’un morceau de texte bloque le style old school sans utiliser de javascript ou de décoration de texte.

Pas de transitions, seulement * clignotent *, * clignotent *, * clignotent *!


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

Le Netscape original avait un rapport cyclique de 80%. Cela vient assez proche, 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; } } 
 This is blinking text. 

Laissez-moi vous montrer un petit tour.

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

Ce que vous devez vraiment faire, c’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; } 
 Blink 

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 blink 

Il n’y a en fait aucun besoin de visibility ou d’ opacity – vous pouvez simplement utiliser la color , qui a l’avantage de ne garder que le “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, this text will blink, this will not. 

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 blink 

Cela fonctionne dans mon cas, le texte clignotant à un intervalle de 1s.

 .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 de lueur utilisez cette

 @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 ...