目前，我有這個代碼：@-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出來，然后再次淡出，再次出現(xiàn)，等等......我希望它淡出，然后再次從這個淡入淡出“提升” opacity: 1.0。那可能嗎？
3 回答
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗 獲得超9個贊
或者，如果您不希望在show和hide之間逐漸過渡（例如閃爍的文本光標(biāo)），您可以使用以下內(nèi)容：
/* 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實(shí)際上非?？?，在許多情況下甚至可能是比CSS更好的默認(rèn)值。值得注意的是，許多DOM調(diào)用使JS動畫變慢（例如JQuery的$ .animate（））。
它還有第二個好處，即如果你.cursor以后添加元素，它們?nèi)詫⑴c其他.cursors 完全同時生成動畫，因為狀態(tài)是共享的，據(jù)我所知，這對CSS來說是不可能的。
添加回答
舉報
0/150
提交
取消