diff --git a/examples/csr/index.html b/examples/csr/index.html
index 3c66aaf..e40b0de 100644
--- a/examples/csr/index.html
+++ b/examples/csr/index.html
@@ -6,6 +6,6 @@
 
     <title>CSR example</title>
 
-    <link data-trunk rel="tailwind-css" href="src/tailwind.css" />
+    <link data-trunk rel="tailwind-css" href="src/style.css" />
   </head>
 </html>
diff --git a/examples/csr/src/main.rs b/examples/csr/src/main.rs
index e53cce7..68554a2 100644
--- a/examples/csr/src/main.rs
+++ b/examples/csr/src/main.rs
@@ -145,7 +145,7 @@ fn App() -> impl IntoView {
                     key=|item| item.id
                     children=|item| item.view
                     enter_from_class="opacity-0"
-                    enter_class="duration-1000"
+                    enter_class="animate-fade-in-bottom-left"
                     move_class="duration-1000"
                     leave_class="opacity-0 duration-1000"
                     appear=true
diff --git a/examples/csr/src/style.css b/examples/csr/src/style.css
new file mode 100644
index 0000000..498c378
--- /dev/null
+++ b/examples/csr/src/style.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes fade-in-bottom-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-150%, 150%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.animate-fade-in-bottom-left {
+  animation: fade-in-bottom-left 1s ease-out 1;
+}
diff --git a/examples/csr/src/tailwind.css b/examples/csr/src/tailwind.css
deleted file mode 100644
index b5c61c9..0000000
--- a/examples/csr/src/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;