diff --git a/components/lib/styleclass/StyleClass.d.ts b/components/lib/styleclass/StyleClass.d.ts
index 71d70700a..ed2e4ca37 100644
--- a/components/lib/styleclass/StyleClass.d.ts
+++ b/components/lib/styleclass/StyleClass.d.ts
@@ -21,8 +21,13 @@ export interface StyleClassOptions {
     selector?: '@next' | '@prev' | '@parent' | '@grandparent' | string | undefined;
     /**
      * Style class to add when item begins to get displayed.
+     * @deprecated since v3.41.0. Use 'enterFromClass' option instead.
      */
     enterClass?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterFromClass?: string | undefined;
     /**
      * Style class to add during enter animation.
      */
@@ -33,8 +38,13 @@ export interface StyleClassOptions {
     enterToClass?: string | undefined;
     /**
      * Style class to add when item begins to get hidden.
+     * @deprecated since v3.41.0. Use 'leaveFromClass' option instead.
      */
     leaveClass?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     */
+    leaveFromClass?: string | undefined;
     /**
      * Style class to add during leave animation.
      */
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 874feef86..81a7b9480 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -51,10 +51,15 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
 
                     DomHandler.addClass(target, binding.value.enterActiveClass);
 
+                    // enterClass will be deprecated, use enterFromClass
                     if (binding.value.enterClass) {
                         DomHandler.removeClass(target, binding.value.enterClass);
                     }
 
+                    if (binding.value.enterFromClass) {
+                        DomHandler.removeClass(target, binding.value.enterFromClass);
+                    }
+
                     target.$p_styleclass_enterlistener = () => {
                         DomHandler.removeClass(target, binding.value.enterActiveClass);
 
@@ -74,10 +79,15 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
                     target.addEventListener('animationend', target.$p_styleclass_enterlistener);
                 }
             } else {
+                // enterClass will be deprecated, use enterFromClass
                 if (binding.value.enterClass) {
                     DomHandler.removeClass(target, binding.value.enterClass);
                 }
 
+                if (binding.value.enterFromClass) {
+                    DomHandler.removeClass(target, binding.value.enterFromClass);
+                }
+
                 if (binding.value.enterToClass) {
                     DomHandler.addClass(target, binding.value.enterToClass);
                 }
@@ -93,10 +103,15 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
                     target.$_pstyleclass_animating = true;
                     DomHandler.addClass(target, binding.value.leaveActiveClass);
 
+                    // leaveClass will be deprecated, use leaveFromClass
                     if (binding.value.leaveClass) {
                         DomHandler.removeClass(target, binding.value.leaveClass);
                     }
 
+                    if (binding.value.leaveFromClass) {
+                        DomHandler.removeClass(target, binding.value.leaveFromClass);
+                    }
+
                     target.$p_styleclass_leavelistener = () => {
                         DomHandler.removeClass(target, binding.value.leaveActiveClass);
 
@@ -111,10 +126,15 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
                     target.addEventListener('animationend', target.$p_styleclass_leavelistener);
                 }
             } else {
+                // leaveClass will be deprecated, use leaveFromClass
                 if (binding.value.leaveClass) {
                     DomHandler.removeClass(target, binding.value.leaveClass);
                 }
 
+                if (binding.value.leaveFromClass) {
+                    DomHandler.removeClass(target, binding.value.leaveFromClass);
+                }
+
                 if (binding.value.leaveToClass) {
                     DomHandler.addClass(target, binding.value.leaveToClass);
                 }