Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix styles breaking transitionend/animationend event #6

Merged
merged 2 commits into from Oct 3, 2019

Conversation

@atomiks
Copy link
Contributor

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

left a comment

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

@@ -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 */

This comment has been minimized.

Copy link
@hankchizljaw

hankchizljaw Oct 3, 2019

Owner

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
@hankchizljaw hankchizljaw merged commit b9fc9a3 into hankchizljaw:master Oct 3, 2019
@atomiks atomiks deleted the atomiks:fix-transitionend branch Oct 3, 2019
@tomByrer

This comment has been minimized.

Copy link

commented on 0fde6c5 Oct 13, 2019

I haven't tested yet, but won't animation: none; work?

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

This is a tricky switch for me; ever since my concussion, I have issues with too much motion & animation. But some is OK (especially if slow & non-shocking) & even useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.