Skip to content

Bug: Applying multiple EaseMotion animation classes on the same element causes only the last one to play #17384

Description

@Nareshkumawat-star

Describe the bug

When two EaseMotion classes are applied to the same element (e.g. ease-fade-in ease-slide-up), only the last declared animation plays because each class sets the animation shorthand, overwriting the previous value.

Steps to Reproduce

  1. Apply class="ease-fade-in ease-slide-up" to any div
  2. Only ease-slide-up plays; ease-fade-in is silently ignored

Expected Behavior

Both animations should play simultaneously via comma-separated animation-name values.

Suggested Fix

Refactor each class to use individual sub-properties (animation-name, animation-duration, animation-timing-function) instead of the animation shorthand, so multiple classes can compose without overriding each other.

Files to Modify

easemotion.css / easemotion.min.css

Metadata

Metadata

Labels

GSSoC-26Official GSSoC 2026 issueanimationAnimation effects, hover interactions, motion ideas, transitionsgood first issueGood for newcomersgssoc:approvedApproved for GSSoC contributionshelp wantedExtra attention neededlevel:intermediateRequires moderate project understanding

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions