diff --git a/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts b/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts
index 4cdc8af130..f871de9331 100644
--- a/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts
+++ b/__tests__/plots/animation/alphabet-interval-non-animate-enter.ts
@@ -17,7 +17,7 @@ export function alphabetIntervalNonAnimateEnter(): G2Spec {
       color: 'steelblue',
     },
     animate: {
-      enterType: null,
+      enter: false,
     },
   };
 }
diff --git a/__tests__/plots/animation/alphabet-interval-scale-in-y.ts b/__tests__/plots/animation/alphabet-interval-scale-in-y.ts
index acbd1132ef..5493c3bf00 100644
--- a/__tests__/plots/animation/alphabet-interval-scale-in-y.ts
+++ b/__tests__/plots/animation/alphabet-interval-scale-in-y.ts
@@ -17,7 +17,9 @@ export function alphabetIntervalScaleInY(): G2Spec {
       color: 'steelblue',
     },
     animate: {
-      enterDuration: 1000,
+      enter: {
+        duration: 1000,
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/deaths-rose-stack-enter.ts b/__tests__/plots/animation/deaths-rose-stack-enter.ts
index f509bb45d7..913b6b8d80 100644
--- a/__tests__/plots/animation/deaths-rose-stack-enter.ts
+++ b/__tests__/plots/animation/deaths-rose-stack-enter.ts
@@ -24,7 +24,9 @@ export function deathsRoseStackEnter(): G2Spec {
     },
     legend: { color: { layout: { justifyContent: 'flex-start' } } },
     animate: {
-      enterType: 'waveIn',
+      enter: {
+        type: 'waveIn',
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/doughnut-purchases-line-path-in.ts b/__tests__/plots/animation/doughnut-purchases-line-path-in.ts
index d9cb41ee73..9a90cf01b4 100644
--- a/__tests__/plots/animation/doughnut-purchases-line-path-in.ts
+++ b/__tests__/plots/animation/doughnut-purchases-line-path-in.ts
@@ -27,8 +27,10 @@ export function doughnutPurchasesLinePathIn(): G2Spec {
           gradientColor: 'start',
         },
         animate: {
-          enterType: 'pathIn',
-          enterDuration: 3000,
+          enter: {
+            type: 'pathIn',
+            duration: 3000,
+          },
         },
       },
       {
diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts b/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts
index dd11dba7c0..0aebaa2f83 100644
--- a/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts
+++ b/__tests__/plots/animation/fruits-interval-stack-enter-color-x.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterColorX(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 600,
+      enter: {
+        duration: 600,
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-color.ts b/__tests__/plots/animation/fruits-interval-stack-enter-color.ts
index 247b0aa753..da160fb648 100644
--- a/__tests__/plots/animation/fruits-interval-stack-enter-color.ts
+++ b/__tests__/plots/animation/fruits-interval-stack-enter-color.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterColor(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 900,
+      enter: {
+        duration: 900,
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts b/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts
index 02e22ea3ea..5288138bf3 100644
--- a/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts
+++ b/__tests__/plots/animation/fruits-interval-stack-enter-defaults.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterDefaults(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 1000,
+      enter: {
+        duration: 1000,
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts b/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts
index ecdcb33b50..90835ed1d9 100644
--- a/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts
+++ b/__tests__/plots/animation/fruits-interval-stack-enter-x-color.ts
@@ -14,7 +14,9 @@ export function fruitsIntervalStackEnterXColor(): G2Spec {
       enterDuration: 1000,
     },
     animate: {
-      enterDuration: 900,
+      enter: {
+        duration: 900,
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/os-area-stack-enter.ts b/__tests__/plots/animation/os-area-stack-enter.ts
index a803fb7a12..dbfd46238f 100644
--- a/__tests__/plots/animation/os-area-stack-enter.ts
+++ b/__tests__/plots/animation/os-area-stack-enter.ts
@@ -23,7 +23,9 @@ export function osAreaStackEnter(): G2Spec {
       shape: 'smooth',
     },
     animate: {
-      enterType: 'growInX',
+      enter: {
+        type: 'growInX',
+      },
     },
   };
 }
diff --git a/__tests__/plots/animation/polio-point-stack-enter.ts b/__tests__/plots/animation/polio-point-stack-enter.ts
index 32c2b0b067..90923506c6 100644
--- a/__tests__/plots/animation/polio-point-stack-enter.ts
+++ b/__tests__/plots/animation/polio-point-stack-enter.ts
@@ -55,7 +55,9 @@ export function polioPointStackEnter(): G2Spec {
           fill: '#666',
         },
         animate: {
-          enterDelay: 5000,
+          enter: {
+            delay: 5000,
+          },
         },
       },
       {
@@ -70,7 +72,9 @@ export function polioPointStackEnter(): G2Spec {
           dy: 30,
         },
         animate: {
-          enterDelay: 5400,
+          enter: {
+            delay: 5400,
+          },
         },
       },
     ],
diff --git a/__tests__/plots/animation/population-interval-rose-keyframe.ts b/__tests__/plots/animation/population-interval-rose-keyframe.ts
index fff84a166a..b897498a37 100644
--- a/__tests__/plots/animation/population-interval-rose-keyframe.ts
+++ b/__tests__/plots/animation/population-interval-rose-keyframe.ts
@@ -18,7 +18,7 @@ export async function populationIntervalRoseKeyframe(): Promise<G2Spec> {
           startAngle: -Math.PI / 2,
         },
         transform: [{ type: 'groupX', y: 'sum' }],
-        animate: { enterType: 'waveIn' },
+        animate: { enter: { type: 'waveIn' } },
         scale: { y: { type: 'sqrt' } },
         encode: { x: 'year', y: 'people' },
         axis: {
@@ -38,7 +38,7 @@ export async function populationIntervalRoseKeyframe(): Promise<G2Spec> {
         },
         coordinate: { type: 'polar', outerRadius: 0.85, startAngle: 0 },
         transform: [{ type: 'groupX', y: 'sum' }],
-        animate: { enterType: 'waveIn' },
+        animate: { enter: { type: 'waveIn' } },
         scale: { y: { type: 'sqrt' } },
         encode: { x: 'year', y: 'people' },
         axis: {
diff --git a/__tests__/plots/animation/population2015-interval-wave-in-radius.ts b/__tests__/plots/animation/population2015-interval-wave-in-radius.ts
index 2dad46abab..746a7edcdf 100644
--- a/__tests__/plots/animation/population2015-interval-wave-in-radius.ts
+++ b/__tests__/plots/animation/population2015-interval-wave-in-radius.ts
@@ -30,7 +30,7 @@ export function population2015IntervalWaveInRadius(): G2Spec {
           radius: 10,
         },
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
     ],
diff --git a/__tests__/plots/animation/profit-interval-range.ts b/__tests__/plots/animation/profit-interval-range.ts
index 3a69d37bd6..049c2788f0 100644
--- a/__tests__/plots/animation/profit-interval-range.ts
+++ b/__tests__/plots/animation/profit-interval-range.ts
@@ -52,7 +52,7 @@ export async function profitIntervalRange(): Promise<G2Spec> {
             data: [{ y: [0, 2000000] }],
             encode: { y: 'y' },
             animate: {
-              enterType: 'fadeIn',
+              enter: { type: 'fadeIn' },
             },
           },
         ],
diff --git a/__tests__/plots/animation/sold-interval-pie-keyframe.ts b/__tests__/plots/animation/sold-interval-pie-keyframe.ts
index 78a4226891..e26613efb0 100644
--- a/__tests__/plots/animation/sold-interval-pie-keyframe.ts
+++ b/__tests__/plots/animation/sold-interval-pie-keyframe.ts
@@ -23,7 +23,7 @@ export function soldIntervalPieKeyframe(): G2Spec {
           },
         ],
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
       {
@@ -42,7 +42,7 @@ export function soldIntervalPieKeyframe(): G2Spec {
           },
         ],
         animate: {
-          enterType: 'waveIn',
+          enter: { type: 'waveIn' },
         },
       },
     ],
diff --git a/__tests__/plots/animation/stocks-keyframe.ts b/__tests__/plots/animation/stocks-keyframe.ts
index d3cc0dceba..64a6083647 100644
--- a/__tests__/plots/animation/stocks-keyframe.ts
+++ b/__tests__/plots/animation/stocks-keyframe.ts
@@ -21,7 +21,7 @@ const facetLine = (data) => ({
       frame: false,
       scale: { y: { zero: true, tickCount: 3 } },
       animate: {
-        enterType: 'pathIn',
+        enter: { type: 'pathIn' },
       },
     },
   ],
@@ -59,7 +59,7 @@ const facetArea = (data) => ({
       },
       scale: { y: { facet: false, zero: true, tickCount: 3 } },
       animate: {
-        exitType: 'fadeOut',
+        exit: { type: 'fadeOut' },
       },
     },
   ],
diff --git a/__tests__/plots/static/population2015-interval-pie.ts b/__tests__/plots/static/population2015-interval-pie.ts
index 5ba11429f8..2231aa189c 100644
--- a/__tests__/plots/static/population2015-interval-pie.ts
+++ b/__tests__/plots/static/population2015-interval-pie.ts
@@ -40,8 +40,10 @@ export function population2015IntervalPie(): G2Spec {
       },
     ],
     animate: {
-      enterType: 'waveIn',
-      enterDuration: 1000,
+      enter: {
+        type: 'waveIn',
+        duration: 1000,
+      },
     },
   };
 }
diff --git a/__tests__/unit/api/mark.spec.ts b/__tests__/unit/api/mark.spec.ts
index 2d1360e845..e574cbb68f 100644
--- a/__tests__/unit/api/mark.spec.ts
+++ b/__tests__/unit/api/mark.spec.ts
@@ -33,7 +33,7 @@ function setOptions(node) {
     .scale('x', { domain: [0, 1] })
     .transform({ type: 'stackY' })
     .style('stroke', 'black')
-    .animate('enterType', 'scaleInX')
+    .animate('enter', { type: 'scaleInX' })
     .attr('facet', true)
     .attr('key', 'mark')
     .attr('class', 'mark')
@@ -77,7 +77,7 @@ function getOptions() {
     scale: { x: { domain: [0, 1] } },
     transform: [{ type: 'stackY' }],
     style: { stroke: 'black' },
-    animate: { enterType: 'scaleInX' },
+    animate: { enter: { type: 'scaleInX' } },
     axis: { x: { tickCount: 10 } },
     legend: { y: { title: 'hello' } },
     slider: { x: {} },
diff --git a/site/docs/api/animation/fadeIn.zh.md b/site/docs/api/animation/fadeIn.zh.md
index 8b9bd73463..123752505d 100644
--- a/site/docs/api/animation/fadeIn.zh.md
+++ b/site/docs/api/animation/fadeIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'fadeIn');
+  .animate('enter', { type: 'fadeIn' });
 ```
diff --git a/site/docs/api/animation/fadeOut.zh.md b/site/docs/api/animation/fadeOut.zh.md
index 7bf832fd6e..c2c47d7dd3 100644
--- a/site/docs/api/animation/fadeOut.zh.md
+++ b/site/docs/api/animation/fadeOut.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'fadeOut');
+  .animate('exit', { type: 'fadeOut' });
 ```
diff --git a/site/docs/api/animation/growInX.zh.md b/site/docs/api/animation/growInX.zh.md
index ada8367c6e..fdf8b7cd16 100644
--- a/site/docs/api/animation/growInX.zh.md
+++ b/site/docs/api/animation/growInX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'growInX');
+  .animate('enter', { type: 'growInX' });
 ```
diff --git a/site/docs/api/animation/growInY.zh.md b/site/docs/api/animation/growInY.zh.md
index 074260547a..2811e839be 100644
--- a/site/docs/api/animation/growInY.zh.md
+++ b/site/docs/api/animation/growInY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'growInY');
+  .animate('enter', { type: 'growInY' });
 ```
diff --git a/site/docs/api/animation/morphing.zh.md b/site/docs/api/animation/morphing.zh.md
index 4967048d86..8c43909b42 100644
--- a/site/docs/api/animation/morphing.zh.md
+++ b/site/docs/api/animation/morphing.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .area()
   /* ... */
-  .animate('enterType', 'morphing');
+  .animate('enter', { type: 'morphing' });
 ```
diff --git a/site/docs/api/animation/pathIn.zh.md b/site/docs/api/animation/pathIn.zh.md
index 55123e9016..3d4cf948f2 100644
--- a/site/docs/api/animation/pathIn.zh.md
+++ b/site/docs/api/animation/pathIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .line()
   /* ... */
-  .animate('enterType', 'pathIn');
+  .animate('enter', { type: 'pathIn' });
 ```
diff --git a/site/docs/api/animation/scaleInX.zh.md b/site/docs/api/animation/scaleInX.zh.md
index 9d8bc4453a..d7cb6b2fd4 100644
--- a/site/docs/api/animation/scaleInX.zh.md
+++ b/site/docs/api/animation/scaleInX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'scaleInX');
+  .animate('enter', { type: 'scaleInX' });
 ```
diff --git a/site/docs/api/animation/scaleInY.zh.md b/site/docs/api/animation/scaleInY.zh.md
index 945897b81a..481c6ae0d4 100644
--- a/site/docs/api/animation/scaleInY.zh.md
+++ b/site/docs/api/animation/scaleInY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'scaleInY');
+  .animate('enter', { type: 'scaleInY' });
 ```
diff --git a/site/docs/api/animation/scaleOutX.zh.md b/site/docs/api/animation/scaleOutX.zh.md
index f019c5416c..55dcbfc6f5 100644
--- a/site/docs/api/animation/scaleOutX.zh.md
+++ b/site/docs/api/animation/scaleOutX.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'scaleOutX');
+  .animate('exit', { type: 'scaleOutX' });
 ```
diff --git a/site/docs/api/animation/scaleOutY.zh.md b/site/docs/api/animation/scaleOutY.zh.md
index e6c83aac85..36f09f8523 100644
--- a/site/docs/api/animation/scaleOutY.zh.md
+++ b/site/docs/api/animation/scaleOutY.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'scaleOutY');
+  .animate('exit', { type: 'scaleOutY' });
 ```
diff --git a/site/docs/api/animation/waveIn.zh.md b/site/docs/api/animation/waveIn.zh.md
index 6d2c5a3f78..564bdfa1ab 100644
--- a/site/docs/api/animation/waveIn.zh.md
+++ b/site/docs/api/animation/waveIn.zh.md
@@ -14,5 +14,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'waveIn');
+  .animate('enter', { type: 'waveIn' });
 ```
diff --git a/site/docs/api/animation/zoomIn.zh.md b/site/docs/api/animation/zoomIn.zh.md
index 8edacf0fef..d10af96d47 100644
--- a/site/docs/api/animation/zoomIn.zh.md
+++ b/site/docs/api/animation/zoomIn.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('enterType', 'zoomIn');
+  .animate('enter', { type: 'zoomIn' });
 ```
diff --git a/site/docs/api/animation/zoomOut.zh.md b/site/docs/api/animation/zoomOut.zh.md
index bc42e14709..6355f3e025 100644
--- a/site/docs/api/animation/zoomOut.zh.md
+++ b/site/docs/api/animation/zoomOut.zh.md
@@ -13,5 +13,5 @@ order: 1
 chart
   .interval()
   /* ... */
-  .animate('exitType', 'zoomOut');
+  .animate('exit', { type: 'zoomOut' });
 ```
diff --git a/site/docs/manual/animation.zh.md b/site/docs/manual/animation.zh.md
index 2a70145cd0..ea60c1cd5f 100644
--- a/site/docs/manual/animation.zh.md
+++ b/site/docs/manual/animation.zh.md
@@ -37,8 +37,10 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInY') // 指定入场动画的类型
-  .animate('enterDuration', 1000); // 指定入场动画的执行时间
+  .animate('enter', {
+    type: 'scaleInY', // 指定入场动画的类型
+    duration: 1000, // 指定入场动画的执行时间
+  });
 ```
 
 ## 动画编码
diff --git a/site/docs/manual/more/use-in-framework.zh.md b/site/docs/manual/more/use-in-framework.zh.md
index d84c416288..c7d19ec700 100644
--- a/site/docs/manual/more/use-in-framework.zh.md
+++ b/site/docs/manual/more/use-in-framework.zh.md
@@ -32,7 +32,7 @@ function renderBarChart(container) {
     .encode('x', 'genre') // 编码 x 通道
     .encode('y', 'sold') // 编码 y 通道
     .encode('key', 'genre') // 指定 key
-    .animate('updateDuration', 300); // 指定更新动画的时间
+    .animate('update', { duration: 300 }); // 指定更新动画的时间
 
   // 渲染可视化
   chart.render();
diff --git a/site/examples/animation/general/demo/fade.ts b/site/examples/animation/general/demo/fade.ts
index a9bd8fd3b5..e3c4f1491c 100644
--- a/site/examples/animation/general/demo/fade.ts
+++ b/site/examples/animation/general/demo/fade.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'fadeIn')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'fadeOut')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'fadeIn', duration: 1000 })
+  .animate('exit', { type: 'fadeOut', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/path-in.ts b/site/examples/animation/general/demo/path-in.ts
index 063d6dd19c..b78275c591 100644
--- a/site/examples/animation/general/demo/path-in.ts
+++ b/site/examples/animation/general/demo/path-in.ts
@@ -17,7 +17,6 @@ chart
   })
   .encode('x', 'date')
   .encode('y', 'close')
-  .animate('enterType', 'pathIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'pathIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/scale-x.ts b/site/examples/animation/general/demo/scale-x.ts
index 2e373fd55d..7fab7b95df 100644
--- a/site/examples/animation/general/demo/scale-x.ts
+++ b/site/examples/animation/general/demo/scale-x.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInX')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'scaleOutX')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'scaleInX', duration: 1000 })
+  .animate('exit', { type: 'scaleOutX', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/scale-y.ts b/site/examples/animation/general/demo/scale-y.ts
index f745992800..c12cc05872 100644
--- a/site/examples/animation/general/demo/scale-y.ts
+++ b/site/examples/animation/general/demo/scale-y.ts
@@ -17,9 +17,7 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'scaleInY')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'scaleOutY')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'scaleInY', duration: 1000 })
+  .animate('exit', { type: 'scaleOutY', duration: 2000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/wave-in.ts b/site/examples/animation/general/demo/wave-in.ts
index 0613b33fb7..cf85b6a356 100644
--- a/site/examples/animation/general/demo/wave-in.ts
+++ b/site/examples/animation/general/demo/wave-in.ts
@@ -19,7 +19,6 @@ chart
   .transform({ type: 'stackY' })
   .encode('color', 'genre')
   .encode('y', 'sold')
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'waveIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/animation/general/demo/zoom-in.ts b/site/examples/animation/general/demo/zoom-in.ts
index b469c47216..31deba600f 100644
--- a/site/examples/animation/general/demo/zoom-in.ts
+++ b/site/examples/animation/general/demo/zoom-in.ts
@@ -21,7 +21,6 @@ chart
   .scale('y', { domain: [65, 90] })
   .style('fillOpacity', 0.3)
   .style('lineWidth', 1)
-  .animate('enterType', 'zoomIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'zoomIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/animation/group/demo/area.ts b/site/examples/animation/group/demo/area.ts
index 3235aa9d05..2a9ceb7b46 100644
--- a/site/examples/animation/group/demo/area.ts
+++ b/site/examples/animation/group/demo/area.ts
@@ -20,6 +20,6 @@ chart
   .encode('shape', 'smooth')
   .transform({ type: 'stackEnter', groupBy: 'color', duration: 5000 })
   .transform({ type: 'stackY', orderBy: 'value' })
-  .animate('enterType', 'growInX');
+  .animate('enter', { type: 'growInX' });
 
 chart.render();
diff --git a/site/examples/animation/group/demo/interval-polar.ts b/site/examples/animation/group/demo/interval-polar.ts
index 861a3e8197..3362aa379b 100644
--- a/site/examples/animation/group/demo/interval-polar.ts
+++ b/site/examples/animation/group/demo/interval-polar.ts
@@ -24,7 +24,7 @@ chart
   .scale('y', {
     type: 'sqrt',
   })
-  .animate('enterType', 'waveIn')
+  .animate('enter', { type: 'waveIn' })
   .axis('y', false);
 
 chart.render();
diff --git a/site/examples/animation/group/demo/interval.ts b/site/examples/animation/group/demo/interval.ts
index b6aee708d0..3026b55b8b 100644
--- a/site/examples/animation/group/demo/interval.ts
+++ b/site/examples/animation/group/demo/interval.ts
@@ -22,7 +22,7 @@ chart
   .encode('y', 'value')
   .encode('color', 'type')
   .encode('color', 'type')
-  .animate('enterDuration', 500)
+  .animate('enter', { duration: 500 })
   .axis('y', false);
 
 chart.render();
diff --git a/site/examples/animation/group/demo/line.ts b/site/examples/animation/group/demo/line.ts
index 965b90bf31..0a4f50fd66 100644
--- a/site/examples/animation/group/demo/line.ts
+++ b/site/examples/animation/group/demo/line.ts
@@ -22,8 +22,7 @@ chart
   .scale('y', { zero: true, nice: true })
   .style('gradient', 'x')
   .style('gradientColor', 'start')
-  .animate('enterType', 'pathIn')
-  .animate('enterDuration', 3000)
+  .animate('enter', { type: 'pathIn', duration: 3000 })
   .axis('y', { labelFormatter: '~s' });
 
 chart
@@ -33,7 +32,7 @@ chart
   .encode('y', 'count')
   .encode('color', 'year')
   .encode('shape', 'point')
-  .animate('enterDuration', 300);
+  .animate('enter', { duration: 300 });
 
 chart
   .text()
@@ -41,7 +40,7 @@ chart
   .encode('x', 'year')
   .encode('y', 'count')
   .encode('text', 'year')
-  .animate('enterDuration', 300)
+  .animate('enter', { duration: 300 })
   .style('strokeWidth', 5)
   .style('stroke', '#fff')
   .style('textAlign', 'center')
diff --git a/site/examples/animation/group/demo/point.ts b/site/examples/animation/group/demo/point.ts
index 957619f87d..c0ddce970d 100644
--- a/site/examples/animation/group/demo/point.ts
+++ b/site/examples/animation/group/demo/point.ts
@@ -44,7 +44,7 @@ chart
   .style('textAlign', 'center')
   .style('fontSize', 24)
   .style('fill', '#666')
-  .animate('enterDelay', 2000);
+  .animate('enter', { delay: 2000 });
 
 chart
   .text()
@@ -55,6 +55,6 @@ chart
   .style('fontSize', 18)
   .style('fill', '#666')
   .style('dy', '30')
-  .animate('enterDelay', 2400);
+  .animate('enter', { delay: 2400 });
 
 chart.render();
diff --git a/site/examples/animation/storytelling/demo/facet-keyframe.ts b/site/examples/animation/storytelling/demo/facet-keyframe.ts
index d91ddee1a8..ff75770565 100644
--- a/site/examples/animation/storytelling/demo/facet-keyframe.ts
+++ b/site/examples/animation/storytelling/demo/facet-keyframe.ts
@@ -37,7 +37,7 @@ fetch(
       .call(utcX)
       .scale('y', { facet: false })
       .style('fillOpacity', 1)
-      .animate('enterType', 'scaleInY');
+      .animate('enter', { type: 'scaleInY' });
 
     keyframe
       .area()
diff --git a/site/examples/general/radial/demo/apple-activity.ts b/site/examples/general/radial/demo/apple-activity.ts
index c5e885d1b2..9c8d912911 100644
--- a/site/examples/general/radial/demo/apple-activity.ts
+++ b/site/examples/general/radial/demo/apple-activity.ts
@@ -35,8 +35,7 @@ spaceLayer
   .axis('x', false)
   .axis('y', false)
   .style('fillOpacity', 0.25)
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 400);
+  .animate('enter', { type: 'waveIn', duration: 400 });
 
 spaceLayer
   .view()
@@ -57,9 +56,11 @@ spaceLayer
       .style('shadowBlur', 20)
       .style('shadowOffsetX', -2)
       .style('shadowOffsetY', -5)
-      .animate('enterType', 'waveIn')
-      .animate('enterEasing', 'easing-out-bounce')
-      .animate('enterDuration', 1000),
+      .animate('enter', {
+        type: 'waveIn',
+        easing: 'easing-out-bounce',
+        duration: 1000,
+      }),
   )
   .call((node) =>
     node
diff --git a/site/examples/general/radial/demo/bar-cornered-radial.ts b/site/examples/general/radial/demo/bar-cornered-radial.ts
index 13a46d7e05..0b6347e29d 100644
--- a/site/examples/general/radial/demo/bar-cornered-radial.ts
+++ b/site/examples/general/radial/demo/bar-cornered-radial.ts
@@ -41,7 +41,6 @@ chart
   })
   .axis('x', { title: false })
   .axis('y', false)
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 1000);
+  .animate('enter', { type: 'waveIn', duration: 1000 });
 
 chart.render();
diff --git a/site/examples/general/radial/demo/bar-radial.ts b/site/examples/general/radial/demo/bar-radial.ts
index 2d689c1084..6bfb2079d8 100644
--- a/site/examples/general/radial/demo/bar-radial.ts
+++ b/site/examples/general/radial/demo/bar-radial.ts
@@ -28,7 +28,6 @@ chart
   })
   .axis('y', { tickFilter: (d, i) => i !== 0 })
   .legend({ color: { length: 400, position: 'bottom' } })
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 800);
+  .animate('enter', { type: 'waveIn', duration: 800 });
 
 chart.render();
diff --git a/site/examples/general/radial/demo/bar-stacked-radial.ts b/site/examples/general/radial/demo/bar-stacked-radial.ts
index 411cd29b22..048413ab5f 100644
--- a/site/examples/general/radial/demo/bar-stacked-radial.ts
+++ b/site/examples/general/radial/demo/bar-stacked-radial.ts
@@ -57,6 +57,6 @@ chart
     direction: 'center',
   })
   .axis('x', { position: 'inner' })
-  .animate('enterType', 'waveIn');
+  .animate('enter', { type: 'waveIn' });
 
 chart.render();
diff --git a/site/examples/general/radial/demo/donut.ts b/site/examples/general/radial/demo/donut.ts
index 3a36c58b62..b86f0982c0 100644
--- a/site/examples/general/radial/demo/donut.ts
+++ b/site/examples/general/radial/demo/donut.ts
@@ -35,7 +35,7 @@ chart
       dy: 12,
     },
   })
-  .animate('enterType', 'waveIn')
+  .animate('enter', { type: 'waveIn' })
   .legend(false);
 
 chart.render();
diff --git a/site/examples/general/radial/demo/pie.ts b/site/examples/general/radial/demo/pie.ts
index 8e80c8b53c..e6e590d593 100644
--- a/site/examples/general/radial/demo/pie.ts
+++ b/site/examples/general/radial/demo/pie.ts
@@ -38,7 +38,7 @@ chart
       dy: 12,
     },
   })
-  .animate('enterType', 'waveIn')
+  .animate('enter', { type: 'waveIn' })
   .legend(false);
 
 chart.render();
diff --git a/site/examples/general/radial/demo/rose-label.ts b/site/examples/general/radial/demo/rose-label.ts
index f96f570419..32d3bacf47 100644
--- a/site/examples/general/radial/demo/rose-label.ts
+++ b/site/examples/general/radial/demo/rose-label.ts
@@ -29,6 +29,6 @@ chart
     transform: [{ type: 'overlapDodgeY' }],
   })
   .legend({ color: { length: 400 } })
-  .animate('enterType', 'waveIn');
+  .animate('enter', { type: 'waveIn' });
 
 chart.render();
diff --git a/site/examples/general/radial/demo/rose.ts b/site/examples/general/radial/demo/rose.ts
index 98ffdf33d3..54426d6b0d 100644
--- a/site/examples/general/radial/demo/rose.ts
+++ b/site/examples/general/radial/demo/rose.ts
@@ -25,6 +25,6 @@ chart
     tickFilter: (d, i) => i !== 0,
     direction: 'right',
   })
-  .animate('enterType', 'waveIn');
+  .animate('enter', { type: 'waveIn' });
 
 chart.render();
diff --git a/site/examples/general/radial/demo/spider-label.ts b/site/examples/general/radial/demo/spider-label.ts
index 2e5f39628b..145d5c4346 100644
--- a/site/examples/general/radial/demo/spider-label.ts
+++ b/site/examples/general/radial/demo/spider-label.ts
@@ -48,7 +48,7 @@ chart
   .style('radius', 4)
   .style('stroke', '#fff')
   .style('lineWidth', 2)
-  .animate('enterType', 'waveIn')
+  .animate('enter', { type: 'waveIn' })
   .legend(false);
 
 chart.render();
diff --git a/site/examples/plugin/lottie/demo/lottie.ts b/site/examples/plugin/lottie/demo/lottie.ts
index ad57484fdd..45d5cfce9e 100644
--- a/site/examples/plugin/lottie/demo/lottie.ts
+++ b/site/examples/plugin/lottie/demo/lottie.ts
@@ -18,10 +18,8 @@ chart
   .encode('x', 'genre')
   .encode('y', 'sold')
   .encode('color', 'genre')
-  .animate('enterType', 'fadeIn')
-  .animate('enterDuration', 1000)
-  .animate('exitType', 'fadeOut')
-  .animate('exitDuration', 2000);
+  .animate('enter', { type: 'fadeIn', duration: 1000 })
+  .animate('exit', { type: 'fadeOut', duration: 2000 });
 
 chart.render();
 
diff --git a/site/examples/theme/theme/demo/dark.ts b/site/examples/theme/theme/demo/dark.ts
index 4820c55e5a..67caf2cb33 100644
--- a/site/examples/theme/theme/demo/dark.ts
+++ b/site/examples/theme/theme/demo/dark.ts
@@ -47,8 +47,7 @@ chart
   })
   .style('radius', 4)
   .style('inset', 1)
-  .animate('enterType', 'waveIn')
-  .animate('enterDuration', 1000)
+  .animate('enter', { type: 'waveIn', duration: 1000 })
   .legend(false);
 
 chart.render();
diff --git a/src/composition/timingKeyframe.ts b/src/composition/timingKeyframe.ts
index 036f00392e..eae6a5e1a9 100644
--- a/src/composition/timingKeyframe.ts
+++ b/src/composition/timingKeyframe.ts
@@ -32,15 +32,19 @@ function setAnimation(node: G2ViewTree, duration: number, easing: string) {
     const n = discovered.pop();
     n.animate = deepMix(
       {
-        enterDuration: duration,
-        updateDuration: duration,
-        exitDuration: duration,
-        updateEasing: easing,
-        updateType: 'morphing',
-        updateFill: 'both',
-        exitType: 'fadeOut',
-        easing,
-        duration,
+        enter: {
+          duration,
+        },
+        update: {
+          duration,
+          easing,
+          type: 'morphing',
+          fill: 'both',
+        },
+        exit: {
+          type: 'fadeOut',
+          duration,
+        },
       },
       n.animate || {},
     );
diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
index 59f7368dd4..e3c143fdcb 100644
--- a/src/runtime/plot.ts
+++ b/src/runtime/plot.ts
@@ -1045,17 +1045,22 @@ function computeAnimationExtent(markState): [number, number] {
   for (const [mark, state] of markState) {
     const { animate = {} } = mark;
     const { data } = state;
+    const { enter = {}, update = {}, exit = {} } = animate;
     const {
-      updateType: defaultUpdateType,
-      updateDuration: defaultUpdateDuration = 300,
-      updateDelay: defaultUpdateDelay = 0,
-      enterType: defaultEnterType,
-      enterDuration: defaultEnterDuration = 300,
-      enterDelay: defaultEnterDelay = 0,
-      exitType: defaultExitType,
-      exitDuration: defaultExitDuration = 300,
-      exitDelay: defaultExitDelay = 0,
-    } = animate;
+      type: defaultUpdateType,
+      duration: defaultUpdateDuration = 300,
+      delay: defaultUpdateDelay = 0,
+    } = update;
+    const {
+      type: defaultEnterType,
+      duration: defaultEnterDuration = 300,
+      delay: defaultEnterDelay = 0,
+    } = enter;
+    const {
+      type: defaultExitType,
+      duration: defaultExitDuration = 300,
+      delay: defaultExitDelay = 0,
+    } = exit;
     for (const d of data) {
       const {
         updateType = defaultUpdateType,
@@ -1196,7 +1201,7 @@ function createAnimationFunction(
     shapeName(mark, defaultShape),
   ).props;
   const { [type]: defaultEffectTiming = {} } = theme;
-  const animate = subObject(mark.animate || {}, type);
+  const animate = mark.animate?.[type] || {};
   return (data, from, to) => {
     const {
       [`${type}Type`]: animation,
diff --git a/src/runtime/transform.ts b/src/runtime/transform.ts
index 8f002066cd..4df1c0d068 100644
--- a/src/runtime/transform.ts
+++ b/src/runtime/transform.ts
@@ -190,9 +190,9 @@ export function maybeNonAnimate(
   if (animate || animate === undefined) return [I, mark];
   deepMix(mark, {
     animate: {
-      enterType: null,
-      exitType: null,
-      updateType: null,
+      enter: { type: null },
+      exit: { type: null },
+      update: { type: null },
     },
   });
   return [I, mark];
diff --git a/src/runtime/types/options.ts b/src/runtime/types/options.ts
index a00bdb6b14..7b7079d213 100644
--- a/src/runtime/types/options.ts
+++ b/src/runtime/types/options.ts
@@ -106,7 +106,11 @@ export type G2Mark = {
   scale?: Record<string, G2ScaleOptions>;
   encode?: Record<string, any | G2EncodeOptions>;
   type?: string | MarkComponent;
-  animate?: Record<string, Primitive>;
+  animate?: {
+    enter?: Record<string, Primitive>;
+    update?: Record<string, Primitive>;
+    exit?: Record<string, Primitive>;
+  };
   facet?: boolean;
   axis?: boolean | Record<string, any>;
   legend?: boolean | Record<string, any>;
diff --git a/src/spec/geometry.ts b/src/spec/geometry.ts
index 62a3e33b52..46d08e5bc6 100644
--- a/src/spec/geometry.ts
+++ b/src/spec/geometry.ts
@@ -152,33 +152,9 @@ export type BaseGeometry<
   animate?:
     | boolean
     | {
-        enterType?: AnimationTypes;
-        enterDuration?: number;
-        enterDelay?: number;
-        enterEasing?: string;
-        enterFill?: 'forwards' | 'none' | 'backwards' | 'both' | 'auto';
-        updateType?: AnimationTypes;
-        updateDuration?: number;
-        updateDelay?: number;
-        updateEasing?: string;
-        updateFill?:
-          | 'forwards'
-          | 'none'
-          | 'backwards'
-          | 'forwards'
-          | 'both'
-          | 'auto';
-        exitType?: AnimationTypes;
-        exitDuration?: number;
-        exitDelay?: number;
-        exitEasing?: string;
-        exitFill?:
-          | 'forwards'
-          | 'none'
-          | 'backwards'
-          | 'forwards'
-          | 'both'
-          | 'auto';
+        enter?: Animation | null | boolean;
+        update?: Animation | null | boolean;
+        exit?: Animation | null | boolean;
       };
   cartesian?: boolean;
   layout?: Record<string, any>;
@@ -192,6 +168,14 @@ type StateOptions = {
   unselected?: Record<string, any>; // @todo
 };
 
+export type Animation = {
+  type?: AnimationTypes;
+  duration?: number;
+  delay?: number;
+  easing?: string;
+  fill?: 'forwards' | 'none' | 'backwards' | 'both' | 'auto';
+};
+
 export type Axis = {
   tickCount?: number;
   labelFormatter?: any;