Tune How To anim

Author: Adam Plesnik

docs/src/css/keyframes.css

@@ -62,12 +62,3 @@
     transform: translateY(-60%);
   }
 }
-
-@keyframes opacity {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

docs/src/demos/TimelineOverrideDemo.tsx

@@ -9,14 +9,14 @@ const TimelineOverrideDemo = () => {
     <DemoWrapper className="" actionButton>
       <div className="sticky top-0  flex flex-col gap-4 p-8 sm:flex-row">
         <div className="flex items-center">
-          <span className="animate-opacity rounded-lg bg-sky-500/40 p-4 dark:bg-fuchsia-300/60">
+          <span className="-translate-y-20 animate-translate-down rounded-lg bg-sky-500/40 p-4 [animation-duration:3s] dark:bg-fuchsia-300/60">
             <Code>timeline</Code> <span className="text-sm font-medium">before</span>{' '}
-            <Code>animate-opacity</Code>
+            <Code>animate-translate-down</Code>
           </span>
         </div>
         <div className="flex items-center">
-          <span className="animate-opacity rounded-lg bg-sky-500/40 p-4 timeline dark:bg-fuchsia-300/60">
-            <Code>animate-opacity</Code> <span className="text-sm font-medium">before</span>{' '}
+          <span className="-translate-y-20 animate-translate-down rounded-lg bg-sky-500/40 p-4 timeline dark:bg-fuchsia-300/60">
+            <Code>animate-translate-down</Code> <span className="text-sm font-medium">before</span>{' '}
             <Code>timeline</Code>
           </span>
         </div>

docs/src/utils/demoExamples.ts

@@ -83,16 +83,13 @@ export const supports = `<div>
   ...   
 </div>`
 
-export const keyframes101 = `@keyframes opacity {
-  from {
-    opacity: 0;
-  }
+export const keyframes101 = `@keyframes translate-down {
   to {
-    opacity: 1;
+    transform: translateY(0);
   }
 }`
 
-export const keyframes102 = `<div class="animate-opacity timeline">
+export const keyframes102 = `<div class="animate-translate-down timeline">
   <!-- The animation should be controlled by the timeline. -->
 </div>`
 
@@ -101,8 +98,8 @@ export const keyframes103 = `
   animation-timeline: scroll(y);
 }
 
-.animate-opacity {
-  animation: opacity 8s ease-in-out both;
+.animate-translate-down {
+  animation: translate-down 3s cubic-bezier(0.65, 0.05, 0.17, 0.99) forwards;
 }
 
 .timeline { /* This is the correct order */

docs/src/views/HowToView.tsx

@@ -22,8 +22,8 @@ const HowToView = () => {
       </Heading>
       <Paragraph>
         CSS animations consist of two components, a set of keyframes and a style describing the
-        animation. Let's declare a simple <Code>@opacity</Code> keyframe set and apply it to an
-        element we want to control by a scroll timeline.
+        animation. Let's declare a simple <Code>translate-down</Code> keyframe set and apply it to
+        an element we want to control by a scroll timeline.
       </Paragraph>
       <CodeBlock language="css">{keyframes101}</CodeBlock>
       <CodeBlock language="html">{keyframes102}</CodeBlock>

docs/tailwind.config.js

@@ -15,10 +15,9 @@ module.exports = {
 
         /* Scroll-driven animations */
         appear: 'appear auto cubic-bezier(0.65, 0.05, 0.17, 0.99) forwards',
-        down: 'translate-down auto ease-in-out forwards',
-        opacity: 'opacity 8s ease-in-out forwards',
+        opacity: 'opacity 2s cubic-bezier(0.65, 0.05, 0.17, 0.99) forwards',
         'scale-to-right': 'scale-to-right auto linear forwards',
-        'translate-down': 'translate-down auto cubic-bezier(0.65, 0.05, 0.17, 0.99) forwards',
+        'translate-down': 'translate-down 3s cubic-bezier(0.65, 0.05, 0.17, 0.99) forwards',
         'translate-up': 'translate-up auto ease-in-out forwards',
       },
       transitionTimingFunction: {