<div class="marquee" style="margin-top: 60px;">
  <ul>
    <li>
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x50/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x70/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/70x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/85x60/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
    </li>
    <li>
      <img src="http://dummyimage.com/90x70/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/85x60/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x50/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/70x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
    </li>
    <li>
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x50/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x70/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/70x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/130x20/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/90x45/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/85x60/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x30/eeeeee/cccccc.png&text=+" />
      <img src="http://dummyimage.com/100x35/eeeeee/cccccc.png&text=+" />
    </li>
  </ul>
</div>

@import "compass/css3";

* {
  margin: 0;
  padding: 0;
}


@mixin center-vertically($pseudo-el: 'before') {
    position: relative;

    &:#{$pseudo-el} {
        content: '';
        position: relative;
        height: 100%;
        width: 0;
    }

    &:#{$pseudo-el},
    > * {
        vertical-align: middle;
        display: inline-block;
    }
}
  
@mixin justify($vertical-align: top, $childs: '*') {
    text-align: justify;
    text-justify: distribute-all-lines;
    line-height: 0;
    
    // clear inline-block spacing
    letter-spacing: -0.31em;

    &:after {
        content: '.';
        display: inline-block;
        height: 0!important;
        width: 100%;
        overflow: hidden!important;
        visibility: hidden;
        
        font-size: 0;
        word-spacing: 100%;
    }

    > #{unquote($childs)} {
        display: inline-block;
        vertical-align: $vertical-align;
        text-align: left;
        line-height: 1;
        
        // reset `inline-block spacing` trick
        letter-spacing: 0;
    }
}
    

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

    
@mixin animation($args...) {
  -webkit-animation: $args;
  -moz-animation: $args;
  -o-animation: $args;
  animation: $args;
}


@mixin animation-play-state($args...) {
  -webkit-animation-play-state: $args;
  -moz-animation-play-state: $args;
  -o-animation-play-state: $args;
  animation-play-state: $args;
}


@include keyframes(loop) {
    0%   {
        @include transform( translateX(0) );
    }
    100% {
        @include transform( translateX(-(33.3% * 2)));
    }
}



$height: 80px;

.cssanimations .marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
  
    > ul {
       list-style: none;
       position: relative;
       z-index: 1;
       top: 0;
       left: 0;
       width: 300%!important;
       height: $height;
        @include animation-play-state(running);
        @include transform(translate3d(0, 0, 0));
        @include animation(loop 100s linear infinite);
    }
  
    > ul > li {
        //padding-left: 50px;
        white-space: normal;
        @include center-vertically();
        @include justify(middle);
        float: left;
        width: 33.333333%;
        overflow: hidden;
        height: $height;  
    
        img {
          margin: 0 1.6%; 
        }
    }
}