JSFiddle - React, Tailwind, and code Playground

by kanelbula

HTML

CSS3 looped animations. The tutorial showing how to create a CSS loop animation using the CSS3 animation property and keyframes rule.

<p>The example of a pure CSS3 animation looping through multiple elements. The trick is to implement a delay in each animation iteration using CSS animation keyframes.
</p>
<p>Recently I was working on the Filmic.eu teaser site. My idea was to create simple transitions purely based on the CSS3 features so the site worked and looked nice without any single line of JS code. One of the challenges I faced was how to create a CSS animation that loops through multiple text elements using fade in and out transitions.</p>

<p>Looking at the <a href="http://www.w3.org/TR/css3-animations/" target="_blank" title="CSS3 Animations Specs">CSS3 Animations Module specs</a> there are properties useful for creating a CSS animation loop:
    <ul class="disc">
        <li>The <span class="code">animation-iteration-count</span> property can be set to <span class="code">infinite</span> so the animation repeats forever.</li>
        <li>The <span class="code">animation-direction</span> property when set to <span class="code">alternate</span> allows to play animation cycle iterations that are even counts in a reverse direction. This can be used to fade in and fade out an element using one and the same animation played in both directions.</li>
    </ul>
</p>
<p>In my case I wanted to animate 3 list elements, showing and hiding one after another. To achieve it without event handling in Javascript I had to set a delay for each upcoming animation so the second animation plays after the first one, the third one after the second one and so on.
    <br/>
    The CSS <span class="code">animation-delay</span> property comes to help. It allows an animation to begin execution some time after it is applied. However it applies for the first iteration of the animation only. The next iterations will be executed immediately which breaks the order of the fade in / out...

CSS

span.code {
 font-family: Courier;   
}