diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index cd78b64ca2..2d4ec2a58e 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -329,7 +329,7 @@ export default defineComponent({
 	transform: translateX(0);
 	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.nav-enter,
+.nav-enter-from,
 .nav-leave-active {
 	opacity: 0;
 	transform: translateX(-240px);
@@ -340,7 +340,7 @@ export default defineComponent({
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.nav-back-enter,
+.nav-back-enter-from,
 .nav-back-leave-active {
 	opacity: 0;
 }
diff --git a/src/client/components/toast.vue b/src/client/components/toast.vue
index 7be9ad5679..cca7846b0f 100644
--- a/src/client/components/toast.vue
+++ b/src/client/components/toast.vue
@@ -38,7 +38,7 @@ export default defineComponent({
 .notification-slide-enter-active, .notification-slide-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-slide-enter, .notification-slide-leave-to {
+.notification-slide-enter-from, .notification-slide-leave-to {
 	opacity: 0;
 	transform: translateX(-250px);
 }
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index be3e04df15..1246b20480 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -110,7 +110,7 @@ export default defineComponent({
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.container-toggle-enter {
+.container-toggle-enter-from {
 	opacity: 0;
 }
 .container-toggle-leave-to {
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index 702cbb98c3..f578ffaa3b 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -72,7 +72,7 @@ export default defineComponent({
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.folder-toggle-enter {
+.folder-toggle-enter-from {
 	opacity: 0;
 }
 .folder-toggle-leave-to {
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index 7b7622d86e..a83353ebfa 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 .popup-enter-active, .popup-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.popup-enter, .popup-leave-to {
+.popup-enter-from, .popup-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index ac00554797..d4af4f0039 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -383,7 +383,7 @@ export default defineComponent({
 	transition: opacity 0.1s;
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter-from, .fade-leave-to {
 	transition: opacity 0.5s;
 	opacity: 0;
 }
diff --git a/src/client/style.scss b/src/client/style.scss
index 4e0baf63cf..3c64c327af 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -464,7 +464,7 @@ hr {
 .zoom-enter-active, .zoom-leave-active {
 	transition: opacity 0.5s, transform 0.5s !important;
 }
-.zoom-enter, .zoom-leave-to {
+.zoom-enter-from, .zoom-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
@@ -476,7 +476,7 @@ hr {
 	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 	transform-origin: center top;
 }
-.zoom-in-top-enter,
+.zoom-in-top-enter-from,
 .zoom-in-top-leave-active {
 	opacity: 0;
 	transform: scaleY(0);