The logic behind it is actually relatively simple and uses a 7+ year old technique. By clicking on an arrow (in this case a label), it checks the relevant input and then using the : checked pseudo selector, we can traverse down the DOM the correct amount of iterations and shift the entire viewport a whole 'segment' over. The lifts work entirely the same way except instead when we click down, we are actually checking the segment below.

Next time you’re putting together some CSS3-based animations you might find it helpful to jump into Chrome Developer Tools and take advantage of its animation inspection and tweaking features. In this quick tip we’ll give you a rundown of which animation dev tools are available in Chrome, how to access them, and what they can do for you.

Vestibular issues are weird. I never used to have one, and now I do. I’ve no idea where it came from. It also makes little logical sense to people. They think I’m lying that I get triggered by animations because I also write about videogames. But here’s the thing: I’m fine with racing games, just as I’m fine with roller-coasters. Whatever’s going on in my head manifests when 1) too much of my focus is taken over by a screen, and; 2) whatever’s happening on the screen is outside of my control.

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers.

CSS grid definitely has the advantage when it comes to quickly organizing layouts. Even simple layouts require minimal effort with CSS grid compared to flexbox. With the grid-template-areas property, we can write responsive layouts with a single rule inside a media query. That’s because grid-template-areas defines a visual grid system on both axes at the once.