jQuery鏈接，淡入淡出只有CSS

Question

我想知道是否可以實現我簡單的延遲 - >淡入淡出（jQuery鏈接動畫）只有CSS 並允許循環無限。

$('.learnwhat').delay(1000).fadeIn(1000); 
$('.learnwhat').delay(1500).fadeOut(1000); 
$('.seeresults').delay(3000).fadeIn(1000); 
$('.seeresults').delay(1000).fadeOut(1000); 
$('.personalsolution').delay(6000).fadeIn(1000); 
$('.personalsolution').delay(1000).fadeOut(1000); 

Answer 1

可以始終使用CSS動畫和除以100％/總秒數計算關鍵幀的％。

因此，例如

$('.learnwhat').delay(1000).fadeIn(1000); 
$('.learnwhat').delay(1500).fadeOut(1000); 

將成爲（1S延遲+1淡入+ 1.5s的延遲+1淡出= 4.5S，100％/ 4.5 = 22.2每秒％或11.1％一半第二自我們希望這也）

.learnwhat{ 
 
    padding:5px; 
 
    background:khaki; 
 
    border:1px solid #ccc; 
 
    animation: learnAnimation 4.5s infinite; 
 
} 
 
@keyframes learnAnimation{ 
 
    0%{opacity:0} 
 
    22.2%{opacity:0} 
 
    44.4%{opacity:1} 
 
    77.7%{opacity:1} 
 
    100%{opacity:0} 
 
}

<div class="learnwhat">learnwhat</div>

---

我只包括標準的關鍵幀語法（沒有供應商細節）

你可以用同樣的邏輯其他兩個。