目前,我有这样的代码:
@-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;
}
它会眨,但只会“朝一个方向”眨。我的意思是,它只是淡出,然后它以不透明度:1.0再次出现,然后再次淡出,再次出现,如此循环……
我想让它淡出,然后从这个淡出再次“提升”到不透明度:1.0。这可能吗?
我的解决方案:
.blink {
动画:blinkMe 2s线性无限;
}
@keyframes blinkMe {
0% {
透明度:0;
}
50% {
透明度:1;
}
100% {
透明度:0;
}
}
< p class = "眨眼”>眨眼< / p >
我使用blinkMe作为动画的名称,2s作为持续时间,线性的时间,无限的,这样它就会永远重复。
我们需要使用JavaScript和jQuery的旧浏览器,因为他们不支持动画和/或@keyframes:
$(文档)时函数(){
setinterval(函数(){
$ (" .blink ") .fadeIn (1000) .fadeOut (1000);
},2000)
});
< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js " > < /脚本>
< p class = "眨眼”>眨眼< / p >
如果你想做一个闪烁效果,就像闪烁标签一样,这将会起作用:
.blink {
动画:眨眼0.5s步启动无限;
}
@keyframes blink {
0% {
透明度:1;
}
50% {
透明度:0;
}
100% {
透明度:1;
}
}
< p class = "眨眼”>眨眼< / p >
如果您想调整速度,请更改持续时间。
我使用class=blink对各自的元素进行处理
简单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);
或者,如果你不想在显示和隐藏之间逐渐过渡(例如,闪烁的文本光标),你可以使用这样的东西:
/* 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 .游标将从可见变为隐藏。
如果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中是不可能的。