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
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

@hankchizljaw hankchizljaw left a comment

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

@hankchizljaw hankchizljaw Oct 3, 2019

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

tomByrer commented on 0fde6c5 Oct 13, 2019

Choose a reason for hiding this comment

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

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
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

3 participants