fix: checkbox trans in Firefox (#38503)

* fix: checkbox trans in Firefox

* chore: code

components/checkbox/style/index.tsx

@@ -24,7 +24,7 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
 });
 
 // ============================== Styles ==============================
-export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
+export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
   const { checkboxCls } = token;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
@@ -107,7 +107,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
           borderRadius: token.borderRadiusSM,
           borderCollapse: 'separate',
-          transition: `all ${token.motionDurationFast}`,
+          transition: `all ${token.motionDurationSlow}`,
 
           '&:after': {
             boxSizing: 'border-box',
@@ -122,8 +122,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
             borderInlineStart: 0,
             transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
             opacity: 0,
-            transition: `all ${token.motionDurationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.motionDurationFast}`,
             content: '""',
+            transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
           },
         },
 
@@ -188,7 +188,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           '&:after': {
             opacity: 1,
             transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-            transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
+            transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
           },
         },
 

components/theme/interface.ts

@@ -175,6 +175,7 @@ export interface SeedToken extends PresetColorType {
   motionEaseInOutCirc: string;
   motionEaseInOut: string;
   motionEaseOutBack: string;
+  motionEaseInBack: string;
   motionEaseInQuint: string;
   motionEaseOutQuint: string;
   motionEaseOut: string;

components/theme/themes/seed.ts

@@ -48,6 +48,7 @@ const seedToken: SeedToken = {
   motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
   motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
+  motionEaseInBack: `cubic-bezier(0.71, -0.46, 0.88, 0.6)`,
   motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,