A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view.
Note that the event handler is not debounced as we need to actually trigger the animations on actual scroll. Is partially optimised by removing the event handler once all elements are visible. Could be further optimised by throttling the event handler.
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.
True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop and the like. As you might have guessed: performance was not that great. Then I rewrote it all by using translateX/translateY, and performance was back.
Selectors should communicate useful information to developers. The purpose is the same but a contextual selector is far more informative to the developer than a class selector, as it communicates context. It’s a lot easier to understand the purpose behind a rule if the selector tells you that it only applies to elements within a certain scope.
Must admit that I still have to contain myself selector-wise — I used to write heavy selectors back in the day — when applying concepts like SMACCS (which in fact has changed how I write CSS nowadays), as some of the stuff such as <article class="news news-breaking"> can be achieved by using a preprocessor (here @extend).
I guess the solution can be found somewhere in between, although my solution might not even be your solution. As Jeremy Keith once put it: it depends.
The bottom line is that whatever you do to organize your code, make sure you judge your methods by whether or not they actually help make your development easier and more maintainable in the long term.
Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. It’s not pretty. You can use animation-fill-mode to smooth these out without having to write extra CSS to match your first or last keyframe styles.
CSS position: sticky; is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome it is locked behind a chrome://flags setting. Fixed-sticky is a polyfill to enabling this in browsers that don’t support it yet.
position: sticky; is one very handy addition to CSS, paving the cowpaths.
Clever use of data-* attributes. A shame though the title of the original post, namely Client-side full-text search in CSS, is poorly chosen though, as it’s not full-text search, nor search, nor only CSS.