Text Animation Delay
Text animation effect can be delayed with the addition of a delay-xxx class applied to the wrapper. This can be helpful if you wish blocks of content to be displayed in a staggered manner on hover/focus. Delay classes are available in steps of 100ms from 100ms to 1000ms (delay-100, delay-200, delay-300 …. delay-1000).
<figure class="c4-izmir">
<img
src="https://source.unsplash.com/WLUHO9A_xik/400x300"
alt="Sample Image"
/>
<figcaption>
<div class="c4-reveal-down">
<h3>
Sample Text
</h3>
</div>
<div class="c4-reveal-left c4-delay-200">
<h3>
Sample Text
</h3>
</div>
<div class="c4-reveal-right c4-delay-400">
<h3>
Sample Text
</h3>
</div>
<div class="c4-reveal-up c4-delay-600">
<h3>
Sample Text
</h3>
</div>
</figcaption>
</figure>
