Comment faire du texte clignotant / clignotant avec CSS 3

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 seule direction". Je veux dire, il disparaît seulement, puis il apparaît de nouveau avec opacity: 1.0, puis disparaît à nouveau, apparaît à nouveau, etc.

Je voudrais qu'il disparaisse, puis "rehausse" de ce fondu à nouveau opacity: 1.0. Est-ce possible?

Vous définissez d'abord opacity: 1;et ensuite vous le terminez 0, donc il commence à partir de 0%et se termine 100%, donc placez simplement l'opacité à 0at 50%et le reste prendra soin de lui-même.

Démo

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

Ici, je règle la durée de l'animation sur 1 second, puis je règle la timingsur linear. Cela signifie qu'il sera constant tout au long. Enfin, j'utilise infinite. Cela signifie que cela continuera indéfiniment.

Remarque: Si cela ne fonctionne pas pour vous, utilisez des préfixes de navigateur comme -webkit, -mozetc., comme requis pour animationet @keyframes. Vous pouvez vous référer à mon code détaillé ici

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

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

^{Merci à Alnitak d'avoir proposé une meilleure approche .}

Démo (clignotant utilisant jQuery)

Utilisez la alternatevaleur de animation-direction(et vous n'avez pas besoin d'ajouter de kéframes de cette façon).

alternate

L'animation doit inverser la direction à chaque cycle. Lors de la lecture inversée, les étapes d'animation sont exécutées à l'envers. De plus, les fonctions de synchronisation sont également inversées; par exemple, une animation d'accélération est remplacée par une animation d'accélération lorsqu'elle est jouée en sens inverse. Le décompte pour déterminer s'il s'agit d'une itération paire ou impaire commence à un.

CSS :

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

J'ai supprimé l' fromimage clé. S'il est manquant, il est généré à partir de la valeur que vous avez définie pour la propriété animée ( opacitydans ce cas) sur l'élément, ou si vous ne l'avez pas définie (et vous ne l'avez pas dans ce cas), à partir de la valeur par défaut (qui est 1pour opacity).

Et veuillez ne pas utiliser uniquement la version WebKit. Ajoutez également celui non préfixé. Si vous voulez simplement écrire moins de code, utilisez le raccourci .

La meilleure façon d'obtenir un clignotement pur "100% allumé, 100% éteint", comme l'ancien, <blink>est comme ceci:

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

Alternativement, si vous ne voulez pas une 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 {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

Tout 1s .cursorira de visibleà hidden.

Si l'animation CSS n'est pas prise en charge (par exemple dans certaines versions de Safari), vous pouvez revenir à cet intervalle JS simple:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

Ce simple JavaScript est en fait très rapide et dans de nombreux cas peut même être un meilleur défaut que le CSS. Il convient de noter que ce sont de nombreux appels DOM qui ralentissent les animations JS (par exemple $ .animate () de JQuery).

Il a également le deuxième avantage que si vous ajoutez des .cursoréléments plus tard, ils animeront toujours exactement en même temps que les autres .cursorpuisque l'état est partagé, c'est impossible avec CSS pour autant que je sache.

Je ne sais pas pourquoi, mais l'animation uniquement de la visibilitypropriété ne fonctionne sur aucun navigateur.

Ce que vous pouvez faire, c'est animer la opacitypropriété de telle sorte que le navigateur ne dispose pas de suffisamment d'images pour faire apparaître ou masquer le texte.

Exemple:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Modifiez la durée et l'opacité en fonction de vos besoins.

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

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

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

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

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

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

En retard, mais je voulais en ajouter une nouvelle avec plus d'images clés ... voici un exemple sur CodePen car il y avait un problème avec les extraits de code intégrés:

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Cela fonctionne pour moi en utilisant class = blink pour les éléments respectifs

Code JS simple

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);