<html>
  <head>
   <title>Firebase Animated logo from a single image</title>
  </head>
  <body>
    <p>It is single age image, animated  by css function <i>animation-timing-function:steps(50, start)</i> In this 50 is frame of image per steps</p>
      <img src="https://www.gstatic.com/mobilesdk/190114_mobilesdk/bootanim-sprite@2x.png">
  </body>
</html>
body{
      justify-object:center;
    }
      img{
        height:260px;
        width:170px;
object-fit:none;
  object-position:-2000px 0px;
  Animation:sco 4s linear infinite;
animation-timing-function: steps(50, start);
      }
    @keyframes sco{
      0%{
object-position:-0px 0px;
      }
      50%{
object-position:-9000px 0px;
      }
      100%{
object-position:-0px 0px;
      }
    }
i{
  color:white;
background:red;    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.