如何使闪烁/闪烁的文本与css3

目前，我有这样的代码:

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

它会眨，但只会“朝一个方向”眨。我的意思是，它只是淡出，然后它以opacity: 1.0重新出现，然后再次淡出，再次出现，等等……

我想让它淡出，然后从这个淡出再次“提升”到opacity: 1.0。这可能吗?

839609 次浏览
小开 
@-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>

小开
最佳答案

你首先设置opacity: 1;，然后你在0结束它，所以它从0%开始，结束于100%，所以相反，只要在50%将不透明度设置为0，其余的事情就会自行解决。

Demo

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


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

Here, I am setting the animation duration to be 1 second, and then I am setting the timing to linear. That means it will be constant throughout. Last, I am using infinite. That means it will go on and on.

Note: If this doesn't work for you, use browser prefixes like -webkit, -moz and so on as required for animation and @keyframes. You can refer to my detailed code here

As commented, this won't work on older versions of Internet Explorer, and for that you need to use jQuery or JavaScript...

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

感谢Alnitak建议一个更好的方法。

< >强演示< / >强 (使用jQuery的Blinker)

小开

为< >强animation-direction < / >强使用alternate值(并且你不需要这样添加任何keframe)。

alternate

动画应该在每个循环中反转方向。当反向播放时，动画步骤将反向执行。此外，定时函数也反转;例如，在反向播放时，缓进动画将被缓出动画取代。用于确定它是偶数还是奇数迭代的计数从1开始。

CSS:

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

我已经删除了from关键帧。如果它缺失，它会从你为元素上的动画属性(在本例中为opacity)设置的值生成，或者如果你没有设置它(在本例中也没有)，则从默认值(对于opacity是1)生成。

请不要只使用WebKit版本。在它后面也加一个没有前缀的。如果你只是想写更少的代码，使用简写。

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


.waitingForConnection2 {
animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;
}
@keyframes blinker2 { to { opacity: 0; } }


.waitingForConnection3 {
animation: blinker3 1s ease-in-out infinite alternate;
}
@keyframes blinker3 { to { opacity: 0; } }
<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

小开

或者，如果你不想在显示和隐藏之间逐渐过渡(例如，闪烁的文本光标)，你可以使用这样的东西:

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

每个1s .cursor将从visible到hidden。

如果CSS动画不受支持(例如在某些版本的Safari中)，你可以回退到这个简单的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);
})()

这种简单的JavaScript实际上是非常快的，在许多情况下甚至可能是一个比CSS更好的默认。值得注意的是，是大量的DOM调用导致JS动画变慢(例如JQuery的$.animate())。

它还有第二个优点，如果你稍后添加.cursor元素，它们仍然会与其他.cursor在同一时间动画，因为状态是共享的，据我所知，这在CSS中是不可能的。

小开

改变持续时间和不透明度以适应。

.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; }
}
小开

我不知道为什么，但只有visibility属性的动画在任何浏览器上都不能工作。

你所能做的就是使opacity属性动画化，这样浏览器就没有足够的帧来淡入或淡出文本。

例子:

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>

小开

像以前的<blink>一样，获得一个纯“100%开，100%关”的闪烁的最好方法是这样的:

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


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

小开 
<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>
小开

晚了，但想添加一个新的与更多的关键帧…这里是一个CodePen上的例子，因为内置代码段有一个问题:

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

小开

它对我来说是通过对各自的元素使用类=眨眼来工作的

简单JS代码

// 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);
小开

enter image description here

.neon {
font-size: 20px;
color: #fff;
text-shadow: 0 0 8px yellow;
animation: blinker 6s;
animation-iteration-count: 1;
}
@keyframes blinker {
0% {
opacity: 0.2;
}
19% {
opacity: 0.2;
}
20% {
opacity: 1;
}
21% {
opacity: 1;
}
22% {
opacity: 0.2;
}
23% {
opacity: 0.2;
}
36% {
opacity: 0.2;
}
40% {
opacity: 1;
}
41% {
opacity: 0;
}
42% {
opacity: 1;
}
43% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}

我使用了font-family: "Quicksand", sans-serif;

这是对字体的导入(放到style。css的顶部)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");
小开

我的解决方案:

.blink {
animation: blinkMe 2s linear infinite;
}
@keyframes blinkMe {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<p class="blink">Blink</p>

I use blinkMe for the name of the animation, 2s for the duration, linear for the timing, and infinite so that it repeats forever.

We need to use JavaScript and jQuery for older browsers as they don’t support animation and/or @keyframes:

$(document).ready(function() {
window.setInterval(function() {
$(".blink").fadeIn(1000).fadeOut(1000);
}, 2000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="blink">Blink</p>

如果你想做一个闪烁效果，就像闪烁标签一样，这将会起作用:

.blink {
animation: blink 0.5s step-start infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<p class="blink">Blink</p>

Change the durations if you want to adjust the speed.

小开

如果你想要平滑的动画，试试这个。

    .blink {
animation: blinker 1s infinite;
}
      

@keyframes blinker {
from { opacity: 1.0; }
50% { opacity: 0.5; }
to { opacity: 1.0; }
}

    <span class="blink">I am blinking</span>
小开

这是每个人的好榜样。试一试

.blinking_live {
height: 15px;
width: 15px;
border-radius: 15px;
background: #58C03D;
animation: blink-live 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}


@keyframes blink-live{


0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}




<div class="blinking_live"></div>

提交答案