Comment faire un 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 clignote seulement dans"une direction". Je veux dire, il disparaît seulement , puis il apparaît avec opacity: 1.0 , puis il disparaît de nouveau, apparaît à nouveau, et ainsi de suite... Je voudrais qu'il s'efface, et puis "raise" de ce fondu à nouveau à opacity: 1.0 . Est-ce possible?
9 réponses
vous mettez d'abord opacity: 1; et ensuite vous le terminez sur 0 , donc il commence de 0% et se termine sur 100% donc à la place de l'opacité de 0 à 50% et le repos prendra soin de lui-même.
.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 de mise en place de am devrait être 1 second , que je mets le timing à linear ce qui signifie qu'il sera constant tout au long, et dernier am en utilisant infinite ce qui signifie qu'il va continuer et sur.
Note: si cela ne fonctionne pas pour vous, utilisez des préfixes de navigateur comme
-webkit,-mozet ainsi de suite comme requis pouranimationet@keyframes. Vous pouvez vous référer à mon code détaillé ici
comme commenté, 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 pour avoir suggéré une meilleure approche .
Démo (Clignotant à l'aide de jQuery)
utiliser la valeur alternate pour animation-direction (et vous n'avez pas besoin d'ajouter des keframes de cette façon).
alternatel'animation doit inverser la direction de chaque cycle. En jouant à l'envers, les pas d'animation sont exécutés à l'envers. En outre, les fonctions de synchronisation sont également inversées; par exemple, une remplacé par une animation de facilité d'accès lorsqu'il est joué à l'envers. 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 { to { opacity: 0; } }
j'ai enlevé le cadre clé from . Si elle est manquante, elle est générée à partir de la valeur que vous avez définie pour la propriété animée ( opacity dans 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 1 pour opacity ).
et n'utilisez pas seulement la version WebKit. Ajouter le unprefixed un après. Si vous voulez juste écrire moins de code, utilisez le raccourci .
La meilleure façon d'obtenir un pur "est de 100%, 100% off" clignote, comme l'ancienne 151920920" 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 show et hide (par exemple un curseur 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 revenir à ce simple intervalle JS:
(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 JavaScript simple est en fait très rapide et dans de nombreux cas peut-être même être un meilleur défaut que le CSS. Il est intéressant de noter que c'est beaucoup d'appels DOM qui font ralentir les animations JS (par exemple $JQuery.animer.))(
il a également le deuxième avantage que si vous ajoutez .cursor éléments plus tard, ils vont encore animer exactement en même temps que d'autres .cursor s puisque l'état est partagé, cela est impossible avec CSS autant que je sache.
Je ne sais pas pourquoi mais animer seulement la propriété visibility ne fonctionne sur aucun navigateur.
ce que vous pouvez faire est d'animer la propriété opacity d'une manière telle que le navigateur n'a pas assez de cadres pour s'effacer dans ou hors du 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>Changement de la durée et de l'opacité en fonction de.
.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; }
}
en retard mais voulait en ajouter un nouveau avec plus d'images clés ... voici un exemple sur le CodePen car il y avait un problème avec les snippets 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>