Skip to content
This repository has been archived by the owner on Sep 26, 2023. It is now read-only.

Fix styles breaking transitionend/animationend event #6

Merged
merged 2 commits into from
Oct 3, 2019
Merged

Fix styles breaking transitionend/animationend event #6

merged 2 commits into from
Oct 3, 2019

Conversation

atomiks
Copy link
Contributor

@atomiks atomiks commented Oct 3, 2019

https://codepen.io/atomiks/pen/gOOYGgM

I don't think it's possible to force animations paused, due to the animationend event, and using animation-duration: 0.01ms instead (or shorter) creates a weird initial jerk in Firefox, and Chrome/Safari flicker if it's an infinite animation unless the duration is like 0.000001ms. Forcing anything there seems unsafe.

Fixes #5

Copy link
Owner

@Andy-set-studio Andy-set-studio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @atomiks. I've just added a couple of changes.

src/reset.css Outdated
@@ -67,11 +67,11 @@ select {
font: inherit;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
/* Remove transitions for people that prefer not to see them */
/* Animations should be handled manually */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This nuclear approach protects people with are negatively affected by motion. Often devs either aren't aware of this media query or they forget to account for it. With that in mind this line should be removed.

src/reset.css Show resolved Hide resolved
@Andy-set-studio Andy-set-studio merged commit b9fc9a3 into Andy-set-studio:master Oct 3, 2019
@atomiks atomiks deleted the fix-transitionend branch October 3, 2019 19:58
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

prefers-reduced-motion transition styles can break JS
3 participants