web-dev-qa-db-fra.com

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 direction". Je veux dire, il ne fait que disparaître, puis il apparaît avec opacity: 1.0, puis à nouveau disparaît, réapparaît, et ainsi de suite ... Je voudrais que le fondu disparaisse, puis "relance" à partir de ce fondu pour revenir à opacity: 1.0 . Est-ce possible?

csshtml5css3opacitycss-animations
207
ojek

Vous définissez d'abord opacity: 1;, puis vous le terminez sur 0; le code commence donc par 0% et se termine sur 100%. Réglez donc l'opacité sur 0 à 50% et rest se chargera 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, la durée de l'animation doit être 1 second, alors que timing est défini sur linear, ce qui signifie qu'elle sera constante tout au long de la journée, et que je utilise infinite pour la dernière fois.

Remarque: si cela ne fonctionne pas pour vous, utilisez des préfixes de navigateur tels que -webkit, -moz et ainsi de suite comme requis pour animation et @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, pour cela, vous devez utiliser jQuery ou JavaScript ....

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

Merci à Alnitak d’avoir suggéré une meilleure approche .

Démo(clignotant utilisant jQuery)

502
Mr. Alien

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

alternate

L'animation doit inverser la direction à chaque cycle. Lors de la lecture inversée, les étapes d'animation sont effectuées à l'envers. De plus, les fonctions de chronométrage sont également inversées; Par exemple, une animation d'insertion est remplacée par une animation d'élimination lorsqu'elle est lue en sens inverse. Le compte pour déterminer s'il s'agit d'une itération paire ou paire commence à une heure.

CSS:

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

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

Et s'il vous plaît, n'utilisez pas uniquement la version WebKit. Ajoutez celui non préfixé après. Si vous voulez juste écrire moins de code, utilisez le raccourci .

63
Ana

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

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>

32
Timmmm

Sinon, si vous ne souhaitez 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;
}

Chaque 1s.cursor passera de visible à hidden.

Si l’animation CSS n’est pas prise en charge (par exemple dans certaines versions de Safari), vous pouvez utiliser 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 réalité très rapide et dans de nombreux cas, il peut même être meilleur que le CSS. Il convient de noter que ce sont de nombreux appels DOM qui ralentissent les animations JS (par exemple, $ .animate () de JQuery).

Le deuxième avantage est que si vous ajoutez des éléments .cursor plus tard, ils s'animeront toujours exactement au même moment que les autres .cursors puisque l'état est partagé, ceci est impossible avec CSS autant que je sache.

15
MattSturgeon

Je ne sais pas pourquoi, mais n'animer que la propriété visibility ne fonctionne sur aucun navigateur. 

Ce que vous pouvez faire, c'est animer la propriété opacity de manière à ce que le navigateur ne dispose pas de suffisamment de cadres pour un fondu en entrée ou en sortie.

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>

12
josketres

Changer la durée et l'opacité pour convenir.

.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; } 
}
8
James Hilliard
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
7
onon15

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>
2
hsobhy
<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
Shahaji
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>
0
Paresh Shiyal