JSFiddle - React, Tailwind, and code Playground

Microsoft animation slider

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="animation">
      <p><img src="https://pp.userapi.com/c844723/v844723832/6a367/rCnFw0Rmsa4.jpg" alt=""></p>

    </div>
  </body>

</html>

<style>
  @keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }
  }

  img {
    animation: hero-background-previous cubic-bezier(.16, 1, .29, .99) .667s both;
    animation-name: slidein;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

</style>