This code uses listener events to turn on and off different divs pre-loaded on the same page. When the triggers are clicked, the "display: active;" setting for the current tab is replaced with "display: block;" by calling on the div's id.
This CSS-only animation lets an image or gif fall from the top of the page using the :nth-of-type(n) selector to apply different settings to every nth child of the same type as it's parent.
This code uses two separate marquees, one alternating between left and right, and one alternating between up and down. Between a set height and width, it gives the effect of a bouncing image reminiscent of a screen-saver.
This tool is an on-hover tooltip that follows the cursor. The position of the tool-tip is set to "fixed" so that the page doesn't scroll when the elements goes off-page.
Another way to change opacity is to set the display of the tooltip from display:none to display:block on hover. There is no way to transition display, so opacity will either be 0 or 1 with this method. Note: For whatever reason, filter: drop-shadow completely breaks this. LOL
Using opacity, the div/span always exists. Display:none/block redraws the div every time.
This lets you use gifs as a cursor while still retaining the animation. It's unstable and not recommended, but can be very cute. It also provides an opportunity to change images when hovered over an element with a dedicated class.
Remember to add cursor:none to elements that have a default cursor, like links, and to add the .link class to any element you'd like the cursor to change on.