fix: button reveal animation (DSN-2529) (#315)

<!-- You can erase any parts of this template not applicable to your Pull Request. -->

**Fixes or implements VF-XXX**

### Brief description. What is this change?

<!-- Build up some context for your teammates on the changes made here and potential tradeoffs made and/or highlight any topics for discussion -->

### Implementation details. How do you make this change?

<!-- Explain the way/approach you follow to make this change more deeply in order to help your teammates to understand much easier this change -->

### Setup information

<!-- Notes regarding local environment. These should note any new configurations, new environment variables, etc. -->

### Deployment Notes

<!-- Notes regarding deployment the contained body of work. These should note any db migrations, etc. -->

### Related PRs

<!-- List related PRs against other branches -->

- https://github.com/voiceflow/XXXXXXXXX/pull/123

### Checklist

- [ ] Breaking changes have been communicated, including:
    - New required environment variables
    - Renaming of interfaces (API routes, request/response interface, etc)
- [ ] New environment variables have [been deployed](https://www.notion.so/voiceflow/Add-Environment-Variables-be1b0136479f45f1adece7995a7adbfb)
- [ ] Appropriate tests have been written
    - Bug fixes are accompanied by an updated or new test
    - New features are accompanied by a new test

packages/chat/src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import { useContext, useMemo } from 'react';
 
 import { ClassName } from '@/constants';
 import { RuntimeStateAPIContext } from '@/contexts';
+import { fadeInAndUp } from '@/styles/animation-utils.css';
 
 import { Button } from '../Button';
 import { ButtonVariant } from '../Button/constants';
@@ -20,7 +21,7 @@ export const Card: React.FC<CardProps> = ({ title, description, image, actions =
   const buttons = useMemo(() => actions.filter(({ name }) => !!name), [actions]);
 
   return (
-    <div className={clsx(ClassName.CARD, cardContainer, className)}>
+    <div className={clsx(ClassName.CARD, cardContainer, className, fadeInAndUp)}>
       {!!image && <img className={cardImage} src={image} />}
       {(title || description) && (
         <div className={cardContent}>

packages/chat/src/components/Carousel/index.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useRef } from 'react';
 
 import { ClassName } from '@/constants';
+import { fadeInAndUp } from '@/styles/animation-utils.css';
 
 import { Card } from '../Card';
 import { CARD_WIDTH } from '../Card/styles.css';
@@ -36,7 +37,14 @@ export const Carousel: React.FC<CarouselProps> = ({ cards }) => {
       <div ref={scrollContainerRef} className={cardsContainer}>
         <div className={cardsInnerContainer}>
           {cards.map((card, i) => (
-            <Card {...card} key={i} />
+            <div
+              className={fadeInAndUp}
+              style={{
+                animationDelay: `${i * 0.1}s`,
+              }}
+            >
+              <Card {...card} key={i} />
+            </div>
           ))}
           <div className={lastCardSpacer}> </div>
         </div>

packages/chat/src/components/SystemResponse/index.tsx

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 
 import { RuntimeStateAPIContext } from '@/contexts';
 import { useAutoScroll } from '@/hooks/useAutoScroll';
+import { fadeInAndUp } from '@/styles/animation-utils.css';
 
 import { Button } from '../Button';
 import { ButtonVariant } from '../Button/constants';
@@ -127,9 +128,16 @@ export const SystemResponse: React.FC<SystemResponseProps> = ({
       {isLast && complete && !!actions.length && (
         <div className={actionsContainer}>
           {actions.map(({ request, name }, index) => (
-            <Button variant={ButtonVariant.INLINE} onClick={() => runtime?.interact(request, name)} key={index}>
-              {name}
-            </Button>
+            <div
+              className={fadeInAndUp}
+              style={{
+                animationDelay: `${index * 0.1}s`,
+              }}
+            >
+              <Button variant={ButtonVariant.INLINE} onClick={() => runtime?.interact(request, name)} key={index}>
+                {name}
+              </Button>
+            </div>
           ))}
         </div>
       )}

packages/chat/src/styles/animation-utils.css.ts

@@ -0,0 +1,11 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const fadeIn = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(20px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+export const fadeInAndUp = style({
+  opacity: 0,
+  animation: `${fadeIn} 0.5s ease-out forwards`,
+});