Fade out, pause, then fade in an element - CSS Only
<p>I am trying to fade out an element, keep that element faded out for, say, 5 seconds, then fade back in the element. I am trying to achieve this using only CSS and not jQuery.</p>

<p>Currently I have set two elements to start fading after 2 seconds, have a fade duration of 2 seconds and then reappear as soon as the duration ends.</p>

<p><a href="https://fiddle.jshell.net/8hwr3rb3/" rel="nofollow">Here's a fiddle</a>.</p>

<p>And the code:</p>

<p>CSS:</p>

<pre><code>.hideMe1{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2s; /* Pause before fade */
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

.hideMe2{
     animation:hideMe 0.5s 1;
    -webkit-animation:hideMe 2s 1; /* Duration of fading and repetitions */
    animation-fill-mode: forwards;

    animation-delay:2.5s; /* Pause before fade */
    -webkit-animation-delay:3s; /* Safari and Chrome */
    -webkit-animation-fill-mode: backwards;  /* End by showing the content */
} 

@keyframes hideMe{
    from {opacity :1;}
    to {opacity :0;}
}

@-webkit-keyframes hideMe{
    from {opacity :1;}
    to {opacity :0;}
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="hideMe1"&gt;
I'll fade first
&lt;/div&gt;
&lt;div class="hideMe2"&gt;
My turn to fade
&lt;/div&gt;
</code></pre>

<p>How can I make each element stay faded for 5 seconds (for example), before reappearing?</p>