A slide effect is basically a transition where one element moves outside the user's view, sliding in one direction while another moves in. To implement this effect, we have to work on two different animations: slide in and slide out. The basic idea to make this effect work is similar to the previous one, although slightly more complicated. To achieve the slide-in effect, we have to move all the pictures outside the section viewport, say left:-500px and then, when the corresponding bullet is clicked, take the selected picture and move it to the opposite side (left:500px) using an animation that then moves it to the correct position (left:0).
To achieve the slide-out effect, we can then use another animation that starts from left:0px to left:-500px. The following is the complete CSS snippet:
/* == [BEGIN] Slide In == */ #slidein:checked ~ section > ul{ overflow:hidden; } #slidein:checked ~ section figure{ left: -500px; animation-name: slideout; animation...