目前，我有这样的代码:
@-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。这可能吗?
当前回答
获得纯“100%开，100%关”闪烁的最好方法，就像老的<blink>是这样的:
.blink { 动画:眨眼器1s步开始无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ < div class = "眨眼”>眨眼< / div >
其他回答
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker { 0%{不透明度:1.0;｝ 50%{不透明度:0.0;｝ 100%{透明度:1.0;｝ ｝ .blink { 宽度:10 px; 高度:10 px; border - radius: 10 px; 动画:眨眼2s线性无限; 背景颜色:红色; margin-right: 5 px; ｝ .content { 显示:flex; flex-direction:行; 对齐项目:中心; ｝ < div class = "内容" > <我类=“眨眼”> < / i > 生活 < / div >
我使用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);
<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>
你首先设置不透明度:1;然后在0处结束，所以它从0%开始，到100%结束，所以把不透明度设置为0，也就是50%剩下的会自动完成。
Demo
.blink_me { 动画:眨眼1s线性无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ <div class="blink_me">BLINK ME</div>
在这里，我将动画持续时间设置为1秒，然后将计时设置为线性。这意味着它始终是不变的。最后，我用的是无限。这意味着它会一直持续下去。
注意:如果这对您不起作用，请使用浏览器前缀，如 -webkit， -moz等根据需要进行动画和 @keyframes。您可以在这里参考我的详细代码
如上所述，这在旧版本的ie浏览器上行不通，为此你需要使用jQuery或JavaScript…
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();
感谢Alnitak提出了一个更好的方法。
演示(Blinker使用jQuery)
获得纯“100%开，100%关”闪烁的最好方法，就像老的<blink>是这样的:
.blink { 动画:眨眼器1s步开始无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ < div class = "眨眼”>眨眼< / div >
