Comment faire du texte clignotant / clignotant avec CSS 3


288

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?


1
Si vous jetez un coup d'œil à droite de cette page, il y a une colonne intitulée Related avec de nombreux sujets «connexes». Jetez un oeil à certains d'entre eux .. vous pourrez étudier tout ce dont vous avez besoin.
Milche Patern

2
Vous pouvez suivre un cours rapide sur les transitions CSS sur Bradshaw
Milche Patern

82
N'en déplaise, s'il veut faire clignoter son texte, il veut faire clignoter son texte. Peu importe quelle année c'est. Les personnes les plus innovantes au monde sont celles qui ne respectent pas les règles. Bien au contraire, ils les cassent généralement et ensuite, tout le monde les copie. Je suppose qu'Apple est un excellent exemple. Il en va de même pour Mackie, etc. Ça a l'air un peu dur mais je ne veux pas provoquer personne. Pas d'émotions fortes. ;-)
Lawrence

2
Copie

Réponses:


657

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)


7
Je viens de remarquer que cela, appliqué à un élément de texte, consomme une quantité ridicule de CPU sur mon ordinateur en utilisant Firefox. Il faut se méfier.
Alex

2
meilleure solution pour être la solution la plus simple à comprendre
avialable

4
@ Mr.Alien, il n'y a pas de synchronisation entre les deux - les fondus prendront un peu plus longtemps que le minuteur (et les minuteurs ne sont pas fiables de toute façon) et vous finirez probablement par vous retrouver avec une file d'attente illimitée d'animations en file d'attente sur l'élément. L'approche correcte serait de se passer du temporisateur et de l'appel "récursif" blinkercomme rappel de fin de l' .fadeInappel.
Alnitak

3
@ Mr.Alien aussi, le tout pourrait être juste un IIFE - cette seule ligne fera le tout, y compris l'invocation initiale: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak

2
step-endau lieu de linearc'était ce que je voulais.
Alex S

71

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 .


Comment faire clignoter plus vite? La modification de 1.7s le gâche.
Alex G

1
@AlexG vous pouvez remplacer la cubic-bezierpièce par ease-in-outou autre chose: cubic-bezier.com
Danilo Bargen

+ Un pour cubic-bezier, car toutes les choses intéressantes ne sont pas linéaires
Agnius Vasiliauskas

57

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>


5
La seule vraie solution "clignotante". Et fonctionne également avec des colorpropriétés, etc. D'autres solutions sont des solutions de contournement ou des animations de "fondu".
Martin Schneider

15

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.


Cela fonctionne bien SAUF pour iOS Safari. Des idées pour le faire fonctionner sur Safari?
Joe Orost

@JoeOrost J'ai inclus une alternative JS pour les navigateurs qui ne prennent pas en charge les animations CSS. À mon avis, cela peut en fait être une meilleure solution en général!
MattSturgeon

14

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>


2
C'est idiot - utilisez simplement step-start(voir ma réponse).
Timmmm

Parfait, juste ce que je cherchais. Pouces vers le haut.
Samuel Ramzan

9

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

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


4

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>


0
<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>

0

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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.