chrome/browser/resources/welcome/shared/animations_css.html

<template>
  <style>
    @keyframes fade-in {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @keyframes slide-in {
      0% { transform: translateX(var(--slide-in-length, 40px)); }
      100% { transform: translateX(0); }
    }

    .fade-in {
      animation-delay: var(--animation-delay, 0);
      animation-duration: 200ms;
      animation-fill-mode: forwards;
      animation-name: fade-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    .slide-in {
      animation-delay: var(--animation-delay, 0);
      animation-duration: 200ms;
      animation-fill-mode: forwards;
      animation-name: slide-in;
      animation-timing-function: ease;
      transform: translateX(30px);
    }

    :host-context(html[dir='rtl']) .slide-in {
      --slide-in-length: -40px;
    }
  </style>
</template>