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>

---

我只包括标准的关键帧语法（没有供应商细节）

你可以用同样的逻辑其他两个。