Now we're ready to implement the remaining two modes: slideshow and arrows. Let's begin with slideshow. All we have to do here is define an animation for each effect (opacity, slidein, and cube) and trigger it, paying attention to specifying a different delay (using the animation-delay
property) to each figure
element.
Let's begin with this last part and define a different delay for each figure
element:
/* == [BEGIN] Animation == */ #animate:checked ~ section #shot1{ animation-delay: 0s; } #animate:checked ~ section #shot2{ animation-delay: 2.5s; } #animate:checked ~ section #shot3{ animation-delay: 5s; } #animate:checked ~ section #shot4{ animation-delay: 7.5s; } #animate:checked ~ section #shot5{ animation-delay: 10s; } #animate:checked ~ section span{ display: none; }
If each animation lasts for 4 seconds (1.5 seconds to animate in, 1 second still, and 1.5 seconds to animate out), we need the second figure
element to start after 2.5 seconds, exactly...