There were two things I wanted to try when I started on the CSS. CSS Animations and prefers-color-scheme
.
CSS Animations
CSS Animations have been around for a while now, (Firefox first starting supporting @keyframes
in 2011) but I haven’t seen that many websites using them so I just assumed people hated them. But I wanted to see if I could do anything interesting. One thing I wanted to do was to allow the user to turn off animations using their system setting. I also want users to be able to disable them with a button on the page, but I started with this.
On the Mac, you go to System Preferences, Accessibility, and then choose Display in the menu on the left. The setting is called Reduce motion.
![Reduce motion in macOS](https://media.dwayne.xyz/blog/reduce-motion-macos.png)
On iOS, it’s in Settings, Accessibility, Motion, Reduce Motion.
![Reduce motion in iOS](https://media.dwayne.xyz/blog/reduce-motion-ios.png)
In CSS, you can detect those kinds of motion settings by using the prefers-reduced-motion: reduce
media query. I used that to set a CSS variable named --animation
to none
. All of the animations in my css file look like animation: var(--animation, ...)
so it uses none
if the media query matches.
![prefers-reduced-motion media query](https://media.dwayne.xyz/blog/prefers-reduced-motion.png)
Staggered Animation
I also wanted to have staggered animations for some of the lists on the site. I don’t think there are any built in CSS attributes for it, so I DuckDuckGo’d it. And then Googled it when DuckDuckGo didn’t find anything useful, which is pretty much how it always goes when I look up anything related to programming. I found an article about setting a css variable called --animation-order
on each element in the list, and then using it my multiplying the value by some duration (like 200 - 400 ms) and setting it to the animation delay.
![Animation order usage](https://media.dwayne.xyz/blog/animation-order-usage.png)
prefers-color-scheme
The other thing I wanted to do is set the colors based on whether the user is using light or dark mode on their device. Detecting the color scheme is done with a media query just like reduce motion. This time I used it to override the default theme color variables.
![prefers-color-scheme media query](https://media.dwayne.xyz/blog/prefers-color-scheme.png)
I didn’t know doing this on macOS automatically applies an animation to the color change to make it transition with the rest of the OS. I thought I would have to add something like transition-property: color, background-color;
to get that to happen, but I didn’t, so that was cool.