JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
<div class="card instagram  carousel animated fadeInUp" id="instagram-1832976660069503753_3842814">
  <div class="card-image">
    <figure class="image is-1by1">
      <img src="https://pbs.twimg.com/media/DMb3CwFW0AA1PPa.jpg" alt="">
      <img src="https://scontent.cdninstagram.com/vp/dcfcf2d3480c25253bc2db1e6d8b9723/5BD6C94C/t51.2885-15/sh0.08/e35/s640x640/37200514_645347119154628_1402837873375313920_n.jpg" alt="">
      <img src="https://scontent.cdninstagram.com/vp/69ab354fa58c9cdbb440c7f3de9efd58/5C1381D0/t51.2885-15/sh0.08/e35/s640x640/36997291_1150010655148320_479148514341814272_n.jpg" alt="">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://scontent.cdninstagram.com/vp/b2928e0421918a19d5552e73611a36a7/5BF7F121/t51.2885-19/11850368_824010354385858_294648127_a.jpg" alt="kulturpessimist">
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">Kulturpessimist, der</p>
        <p class="subtit8le is-6">@kulturpessimist</p>
      </div>
    </div>
    <div class="content">
      This is a dog.
      <br>
      <br>
      <a href="https://www.instagram.com/p/BlwCo-RBlMJ/" target="_blank">
          <time datetime="">27.7.2018 23:44:27</time>
        </a>
    </div>
  </div>
</div>

CSS

.card {
  margin: 20px auto;
  max-width: 400px;
}

@keyframes slider {
  /* first of all wait a cpl of seconds */
  0%,
  45% {
    margin-left: 0%;
  }
  50%,
  94.99% {
    margin-left: 100%;
  }
  95% {
    margin-left: -100%;
  }
  /* and reset */
  100% {
    margin-left: 0%;
  }
}
.card-image figure {
  overflow: hidden;
	--duration: 30s;
}
.card-image figure img:nth-last-of-type(1) {
  animation: slider var(--duration) infinite;
}
/*
.card-image figure img:nth-of-type(2) {
  border: 10px solid red;
  animation: slider 15s infinite;
  animation-delay: 5s;
}
*/