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>
Sample Image

Sample Text

Sample Text

Sample Text

Sample Text