css3動畫硬閃爍（幀間無褪色）

試圖用css3動畫連續閃爍三個元素。我已經運行了，但每幀都有淡入淡出，我想刪除它。理想情況下，每個元素保持可見1秒，然後立即隱藏。css3動畫硬閃爍（幀間無褪色）

我試過在0%和99%爲opacity:1和100%爲opacity: 0但仍沒有運氣設置與幀動畫。

我希望通過這種方法消除褪色！

CSS：

.motion.play .frame { 
    -webkit-animation-name: flash; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: linear; 
} 
    .frame:nth-of-type(2) { 
     -webkit-animation-delay: 1s; 
    } 
    .frame:nth-of-type(3) { 
     -webkit-animation-delay: 2s; 
    } 

    @-webkit-keyframes flash { 
     0% { 
      opacity: 1; 
     } 
     100% { 
      opacity: 0; 
     } 
    }

來源

2013-03-18 technopeasant

使用適當的animation-timing-function：

http://jsfiddle.net/rfGDD/1/（僅適用於WebKit的）

.motion.play .frame { 
    -webkit-animation-name: flash; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; /* not "linear" */ 
    -webkit-animation-fill-mode:forwards; 
    -webkit-animation-timing-function:steps(3, end); 
}

MDN document on fill-mode

MDN document on direction

MDN document on steps() timing function

編輯：

哎呀，只是實現的邏輯缺陷。

修：http://jsfiddle.net/rfGDD/3/（WebKit的只）

除了上述改變，flash動畫改變爲以下：

@-webkit-keyframes flash { 
    0% { 
     opacity: 1; 
    } 
    33% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0; 
    } 
}

的問題是，動畫播放3秒，但各元件需要在第二個＃1之後留在opacity:0狀態，所以我需要將動畫分成2個階段（時間長度比爲1：2），因此元素可以看起來像他們在最後階段停留2秒。

來源

2013-03-18 03:40:01 Passerby

感謝您的回答！瞭解你對填充模式和方向的看法，但看到一個步驟問題。按照你的小提琴，動畫絕對有三個階段，但它變得越來越黑暗。相反，它應該閃爍穩定的紅色，綠色，藍色而不會消失或失去亮度。如果我註釋掉計時功能，它在閃爍每種顏色時效果會更好，但我希望避免100％到0的不透明度褪色。有什麼想法嗎？ – technopeasant 2013-03-18 03:49:44

@technopeasant糟糕，我的錯誤。我已經更新了我的答案，請檢查！ – Passerby 2013-03-18 04:02:27

只需定義您的動畫，使它儘可能保持一個狀態，然後儘可能快地切換到另一個狀態。像這樣：

@-webkit-keyframes flash { 
     0% { opacity: 1; } 
    49% { opacity: 1; } 
    50% { opacity: 0; } 
    100% { opacity: 0; } 
}

來源

2015-01-27 13:18:20 mbirth

這絕對應該是答案。 – skolind 2017-08-10 19:26:02

您可以保持最長時間的不透明度並快速更改。

試試這個：

.div 
    animation: blink 1s linear infinite 

@keyframes blink 
    0%,50% 
    opacity: 0 
    51%,100% 
    opacity: 1

來源

2016-06-18 04:05:09

css3動畫硬閃爍（幀間無褪色）

回答

相關問題