<div class="Animation">
  <div class="Animation-frames">
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_00.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_01.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_02.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_03.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_04.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_05.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_06.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_07.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_08.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_09.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_10.png" /></div>
    <div class="Animation-frame"><img src="https://muffinman.io/img/rm/frame_11.png" /></div>
  </div>
</div>


<a href="https://muffinman.io/css-only-frame-animations/" target="_blank">Read the blog post</a>

$time: 600ms;
$number-of-frames: 12;
$frame-duration: $time / $number-of-frames;

@keyframes frame-animation {
  100% {
    transform: translateX(-100%);
  }
}

.Animation {
  margin: 0 auto;
  max-width: 520px;
  overflow: hidden;
  margin-bottom: 20px;
}

.Animation-frames {
  animation: frame-animation $time infinite;
  animation-timing-function: steps($number-of-frames);
  display: flex;
  width: $number-of-frames * 100%; 
  background: #499271;
}

.Animation-frame {
  display: block;
  width: 100% / $number-of-frames;
  max-width: 100% / $number-of-frames;
  flex-basis: 100% / $number-of-frames;
  
  img {
    width: 100%;
  }
}

//////////////////////////////////////////////
// Typography
//////////////////////////////////////////////
body {
  background: #f4f5fa;
  padding: 20px;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-align: center;
}

a {
  font-size: 14px;
  color: #999;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
  transition: all 250ms;
  
  &:hover {
    color: #777;
    border-bottom: 1px solid #555;
  }
}