punkfairie/modern-css-reset
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reduce motion of ::before and ::after pseudo-elements

Browse source 
The change adds the `*::before` and *::after` in the reduce motion media query. Effectively these additions should prevent any animations which were happening in these pseudo-elements when the user has opted to reduce the motion. 

Why?
I've come across an edge case where I'm animating an `::after` (not sure if that's the ideal way to do it), but animations should be disabled for these pseudo-elements as well.
This commit is contained in:
Kevin 2020-10-22 02:30:38 +03:00 committed by GitHub
parent f5531ac895
commit f1ab7b6974
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/reset.css
View file

@ -77,7 +77,9 @@ img:not([alt]) {
/* Remove all animations and transitions for people that prefer not to see them */ /* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { *,
*::before,
*::after {
animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;