From f83613eacc7c4095424d20b39ec2ad66044b8236 Mon Sep 17 00:00:00 2001 From: S0412-2007 Date: Thu, 4 Jun 2026 12:42:45 +0530 Subject: [PATCH 1/3] feat: add vendor prefixes for cross-browser animation compatibility (fixes #1117) --- submissions/vendor-prefixes/README.md | 14 ++++++++++++++ submissions/vendor-prefixes/demo.html | 21 +++++++++++++++++++++ submissions/vendor-prefixes/style.css | 25 +++++++++++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 submissions/vendor-prefixes/README.md create mode 100644 submissions/vendor-prefixes/demo.html create mode 100644 submissions/vendor-prefixes/style.css diff --git a/submissions/vendor-prefixes/README.md b/submissions/vendor-prefixes/README.md new file mode 100644 index 00000000..59375f75 --- /dev/null +++ b/submissions/vendor-prefixes/README.md @@ -0,0 +1,14 @@ +# Vendor Prefixes for Cross-Browser Compatibility + +## What it does +Adds -webkit-, -moz-, and -o- vendor prefixes to animation, transform, and transition properties to ensure consistent rendering across all major browsers including older Safari and mobile browsers. + +## How to use +Add after easemotion.css: +\\\html + + +\\\ + +## Why it fits EaseMotion CSS +Fixes issue #1117 - ensures EaseMotion animations work correctly on WebKit-based browsers, Safari, and legacy mobile browsers. diff --git a/submissions/vendor-prefixes/demo.html b/submissions/vendor-prefixes/demo.html new file mode 100644 index 00000000..969e2597 --- /dev/null +++ b/submissions/vendor-prefixes/demo.html @@ -0,0 +1,21 @@ + + + + + Vendor Prefixes Demo + + + + + +
Fade In
+
Slide Up
+
Zoom In
+

Works on Chrome, Firefox, Safari, and legacy browsers.

+ + diff --git a/submissions/vendor-prefixes/style.css b/submissions/vendor-prefixes/style.css new file mode 100644 index 00000000..42f1973d --- /dev/null +++ b/submissions/vendor-prefixes/style.css @@ -0,0 +1,25 @@ +/* Vendor Prefixes for Cross-Browser Animation Compatibility (Issue #1117) */ + +/* Keyframe animations with vendor prefixes */ +@-webkit-keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } +@-moz-keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } +@keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } + +@-webkit-keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } +@-moz-keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } +@keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } + +/* Vendor-prefixed transform support */ +[class*='ease-'] { + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; + + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + transform: translateZ(0); +} From 68e9292a2961d51730d3e94901b69db0709c4842 Mon Sep 17 00:00:00 2001 From: S0412-2007 Date: Thu, 4 Jun 2026 18:04:02 +0530 Subject: [PATCH 2/3] feat: add SCSS variables and mixins to reduce repetitive CSS (fixes #1116) - Add scss/_variables.scss with easing curve and duration tokens - Add scss/_mixins.scss with ease-transition() and ease-animation() mixins - Add scss/_animations.scss refactored from core/animations.css - Eliminates repeated cubic-bezier and transition declarations - Reduces bundle size and keeps codebase DRY --- scss/_mixins.scss | 16 ++++++++++++++++ scss/_variables.scss | 15 +++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 scss/_mixins.scss create mode 100644 scss/_variables.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 00000000..774c0a0e --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,16 @@ +@use "variables" as *; + +// Standard transition mixin +@mixin ease-transition($property: transform, $speed: $speed-medium, $easing: var(--ease-ease)) { + transition: $property $speed $easing; +} + +// Animation mixin +@mixin ease-animation($name, $duration: 1s, $easing: $ease-in-out, $iteration: infinite) { + animation: $name $duration $easing $iteration; +} + +// Timing function mixin +@mixin ease-timing($easing: $ease-in-out) { + animation-timing-function: $easing; +} diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 00000000..53b8f59b --- /dev/null +++ b/scss/_variables.scss @@ -0,0 +1,15 @@ +// ============================================ +// EaseMotion-css — SCSS Animation Tokens +// Fixes #1116: DRY refactor of repetitive CSS +// ============================================ + +// Core easing curves (matching existing CSS vars) +$ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1); +$ease-bounce: cubic-bezier(0.8, 0, 1, 1); +$ease-in-out: cubic-bezier(0, 0, 0.2, 1); +$ease-ping: cubic-bezier(0, 0, 0.2, 1); + +// Duration tokens (matching --ease-speed-* vars) +$speed-fast: var(--ease-speed-fast); +$speed-medium: var(--ease-speed-medium); +$speed-slow: var(--ease-speed-slow); From c914ca7f0cd28d3911668428f2c2078019e85ce3 Mon Sep 17 00:00:00 2001 From: S0412-2007 Date: Thu, 4 Jun 2026 18:31:08 +0530 Subject: [PATCH 3/3] fix: remove vendor-prefixed keyframes --- submissions/vendor-prefixes/style.css | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/submissions/vendor-prefixes/style.css b/submissions/vendor-prefixes/style.css index 42f1973d..0ecb4924 100644 --- a/submissions/vendor-prefixes/style.css +++ b/submissions/vendor-prefixes/style.css @@ -1,25 +1,17 @@ /* Vendor Prefixes for Cross-Browser Animation Compatibility (Issue #1117) */ /* Keyframe animations with vendor prefixes */ -@-webkit-keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } -@-moz-keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } + @keyframes ease-kf-fade-in { from { opacity: 0; } to { opacity: 1; } } -@-webkit-keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } -@-moz-keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } + @keyframes ease-kf-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Vendor-prefixed transform support */ [class*='ease-'] { - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; animation-fill-mode: both; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; backface-visibility: hidden; - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); transform: translateZ(0); }