目前，我有这样的代码:
@-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_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; }
}
其他回答
这是每个人的好榜样。试一试
.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>
我不知道为什么，但动画只有可见性属性是不工作在任何浏览器。
你能做的就是使不透明属性动画化，这样浏览器就没有足够的帧来淡入或淡出文本。
例子:
跨度{ 透明度:0; 动画:眨眼1s线性无限; ｝ @关键帧闪烁{ 从, 49.9% { 透明度:0; ｝ 50%, , { 透明度:1; ｝ ｝ 我正在闪烁文本</span>
改变持续时间和不透明度以适应。
.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; }
}
获得纯“100%开，100%关”闪烁的最好方法，就像老的<blink>是这样的:
.blink { 动画:眨眼器1s步开始无限; ｝ @keyframes blinker { 50% { 透明度:0; ｝ ｝ < div class = "眨眼”>眨眼< / 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 .游标将从可见变为隐藏。
如果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中是不可能的。
