jQuery chaining、fadeIn、fadeOutのみのCSS

Question

CSS で簡単な遅延 - >フェードイン（jQueryチェーンアニメーション）を達成でき、無限にループすることができるのだろうかと思います。

$('.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遅延+ 1Sフェードイン+ 1.5秒の遅延+ 1Sフェードアウト= 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>

---

たい

私はあなたが他の二つのために同じロジックを使用することができ、標準のキーフレームの構文（なしベンダーの仕様）

のみを含んでいます。