These examples provide ideas for using CSS transition.
The examples cover two main ideas:
- Using transistion with :hover
- Using transition with JS by adding an removing a class that triggers the transition.
- Using transition timing functions
Bonus topic: oklch colors!
You can look at these examples in any order. Here is what is in each of the examples:
- index.html - presents a series of examples that work with on hover. These start with very basic ideas present progressively more complex ideas. Pay close attention to the comments which include explanations and links to documentation.
- js-transition.html - Contain simple examples showing how to trigger tranistions with JS.
- rows.html - Expands the concept of creating transitions with JS + Transition with a fully realized example. This example also introduces oklch colors, and provides a good comparison with hsl colors.
- four.html - Is another example that riffs on the idea of triggering transitions with JS.
- squares.html - Another example that works with triggering transitions with JS.