rotate animation

LiveDuo · Nov 8, 2023 · 145e13a · 145e13a
1 parent 6aac940
commit 145e13a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
@@ -102,7 +102,7 @@ const Category: React.FC<CategoryProps> = ({ themeIndex, category, components, s
         <div className="flex-1 flex items-center">
           <Squares2X2Icon className="h-4 w-4 ml-2 mr-4" /> <h2 className="text-xs uppercase">{category}</h2>
         </div>
-        <a style={{ transform: `rotate(${show ? 180 : 0}deg)` }}>
+        <a className="rotate-animation" style={{ transform: `rotate(${show ? 180 : 0}deg)` }}>
           <ArrowSmallUpIcon className="h-4 w-4" />
         </a>
       </div>

diff --git a/lib/client/vanilla/index.css b/lib/client/vanilla/index.css
@@ -6,3 +6,8 @@
   transition-timing-function: ease-in;
   transition: 0.2s cubic-bezier(0.2, 1, 0.2, 1);
 }
+
+.rotate-animation {
+  transition-timing-function: linear;
+  transition: 0.2s;
+}