Adds "prefers-reduced-motion" media query

Adds prefers-reduced-motion media query to not show blinking _ if the user prefers reduced motion (as indicated by their OS settings).
This commit is contained in:
login000 2020-05-07 14:34:47 +10:00 committed by GitHub
parent 10516a8223
commit 13331aae80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 6 deletions

View File

@ -67,12 +67,14 @@ hr {
from { content: "_"; }
to { content: ""; }
}
h1::after {
content: "_";
animation-name: cursor;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 1s;
@media not (prefers-reduced-motion: reduce) {
h1::after {
content: "_";
animation-name: cursor;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 1s;
}
}
h1 {
text-transform: uppercase;