Q:

jQuery chaining, fadeIn and fadeOut with only CSS

I am wondering if I can achieve my simple delay -> fadeins (jQuery chaining animations) with only CSS and allow to loop infinitely. 
$('.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);

A:

You can always use css animations and calculate the % of the keyframes by dividing 100% / total seconds.
So for example the 
$('.learnwhat').delay(1000).fadeIn(1000);
$('.learnwhat').delay(1500).fadeOut(1000);

would become (1s delay + 1s fadeIn + 1.5s delay + 1s fadeOut = 4.5s, 100% / 4.5 = 22.2% per second or 11.1 per half second since we want that as well)

.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>

I have only included the standard keyframes syntax (no vendor specifics)
You can use the same logic for the other two.

