Comment faire du texte clignotant / clignotant avec CSS3?

Question

Actuellement, j'ai ce code:

 @-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s; 
}   
 

Il clignote, mais il ne clignote que dans "une direction", je veux dire, il s’efface, puis apparaît de nouveau avec opacity: 1.0 , puis s’efface de nouveau, apparaît à nouveau, etc. ... I voudrait qu'il disparaisse progressivement, puis "relance" à partir de ce retour à opacity: 1.0 . Est-ce possible?

Answer 1

Vous êtes le premier paramètre opacity: 1; et que vous êtes fin sur 0, de sorte qu'il démarre à partir d' 0% et se termine 100% donc, au lieu de cela, vous devriez commencer sur 0% et réglez l'opacité à l' 1, aller de l'avant ensemble de l' opacity d' 0 à 50% et que de nouveau mis à 1 à 100%.

Démo

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

Ici, je suis réglage animation durée devrait être d' 1 second, que suis en train de l' timing de linear ce qui signifie qu'il sera constante tout au long, et le dernier matin à l'aide d' animation-iteration-count et je l'ai fixé que d' infinite cela signifie qu'il va aller sur et sur. Suis appelant les mêmes propriétés avec un -webkit préfixe webkit prise en charge du navigateur ainsi que -moz pour les anciennes versions de Firefox.

---

Comme indiqué, cela ne fonctionne pas sur les anciennes versions d'Internet Explorer, pour cela, vous devez utiliser jQuery ou JavaScript....

function blinker() {
    $('.blink_me').fadeOut(500);
    $('.blink_me').fadeIn(500);
}

setInterval(blinker, 1000); //Runs every second

Démo (Clignotant à l'aide de jQuery)

Answer 2

Utiliser l' alternate valeur animation-direction (et vous n'avez pas besoin d'ajouter de keframes de cette façon).

alternate

L'animation devrait inverser la direction de chaque cycle. Lors de la lecture en sens inverse, l'animation étapes sont effectuées en arrière. En outre, les fonctions de chronométrage sont également inversées; par exemple, une aisance dans l'animation est remplacé par une sortie progressive de l'animation quand il est joué en sens inverse. Le comte de déterminer s'il est pair ou impair itération commence à un.

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}

Aussi, ne pas utiliser uniquement la version de WebKit. Ajouter le unprefixed un après. Si vous voulez juste écrire moins de code, utilisez le raccourci.

Answer 3

Sinon, si vous ne voulez pas de transition progressive entre afficher et masquer (par exemple un curseur de texte clignotant), vous pouvez utiliser quelque chose comme:

 /* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
}
.cursor {
  animation: blinker steps(1) 1s infinite;
}
 

Chaque 1s .cursor ira de visible à hidden .

Answer 4

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}