htmlcssimagescroller

Trying to make a never ending image scroller with mulitiple images but I'm stuck, any tips?

I am updating the website at my work with a coworker of mine and we had an awesome idea to have our sponsors scroll at the bottom of the screen to more easily see all of them and to make it look a bit neater than previous designs. The issue is, we have yet to figure out how to get the images to scroll on the same line. We are currently using HTML5 and CSS to attempt to solve this problem but with no luck. I tried to follow an awesome tutorial that someone put out but it was made before HTML5 and therefore does not appear to work, this is what I am following https://designshack.net/articles/css/infinitephotobanner/ I could of course be interpenetrating numbers wrong so I need some explanations. I will include my code in a moment to see if anyone can see my error and correct me, I need an extra set of more experienced eyes. The strange thing is, it seems to be almost working in here yet it isn't working at all for my webpage. Any suggestions? The images are all apearing on different lines and only the top one is scrolling. 

style.css
/*body and container*/

* {
  margin: 0;
  padding: 0;
}

body {
  background: url('dark_geometric.png');
}

#container {
  width: 1000px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}


/*header*/

header {
  width: 800px;
  margin: 40px auto;
}

header h1 {
  text-align: center;
  font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}

header p {
  font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
  text-align: justify;
}


/*photobanner*/

.photobanner {
  height: 75px;
  width: 3550px;
  margin-bottom: 80px;
}

.photobanner img {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.photobanner img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  cursor: pointer;
  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}


/*keyframe animations*/

.first {
  -webkit-animation: bannermove 30s linear infinite;
  -moz-animation: bannermove 30s linear infinite;
  -ms-animation: bannermove 30s linear infinite;
  animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}
<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/usu.xsl" site="1_XSL" extension="php"?>
  <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">			
			<!-- Testing out the scroller -->
	
		<head>
			<meta charset="utf-8"/>
			<meta name="description" content="description">
				<title>Coperate Aggie Sponsers</title>
				<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
			</meta>
		</head>			
		<body>
			<div id="container">
			<header>
				<h1>Coperate Aggie Sponsers</h1>
				</header>
			<div class="photobanner">
					<a href="https://www.l3t.com/"><img class="first" src="{{f:21250202}}" width="125"                     height="75"/></a>
          <a href="http://www8.hp.com/us/en/home.html"><img src="{{f:21250199}}" width="75"                       height="75"/></a>
          <a href="https://www.conservice.com/"><img src="{{f:21250197}}" width="266" height="75"/></a>
          <a href="http://ramcompany.com/wordpress/"><img src="{{f:21250201}}" width="150"                       height="75"/></a>
          <a href="http://www.imflash.com/"><img src="{{f:21250195}}" width="236" height="75"/></a>
          <a href="http://www.tecuity.com/"><img src="{{f:21250200}}" width="186" height="75"/></a>
          <a href="https://www.vivint.com/"><img src="{{f:21250196}}" width="256" height="75"/></a>
          <a href="https://state.nationalguard.com/utah"><img src="{{f:21250198}}" width="92"                     height="75"/></a>
          <a href="https://www.l3t.com/"><img src="{{f:21250202}}" width="125"                     height="75"/></a>
          <a href="http://www8.hp.com/us/en/home.html"><img src="{{f:21250199}}" width="75"                       height="75"/></a>
          <a href="https://www.conservice.com/"><img src="{{f:21250197}}" width="266" height="75"/></a>
          <a href="http://ramcompany.com/wordpress/"><img src="{{f:21250201}}" width="150"                       height="75"/></a>
          <a href="http://www.imflash.com/"><img src="{{f:21250195}}" width="236" height="75"/></a>
          <a href="http://www.tecuity.com/"><img src="{{f:21250200}}" width="186" height="75"/></a>
          <a href="https://www.vivint.com/"><img src="{{f:21250196}}" width="256" height="75"/></a>
          <a href="https://state.nationalguard.com/utah"><img src="{{f:21250198}}" width="92"                     height="75"/></a>
			</div>
		</div>	
		</body>
			<!-- /com.omniupdate.div -->

The images themselves to not show here because it is an inside reference on the webpage itself but the concept is there.

Solution

  • It would seem you've implemented the animation wrong, as per your reference. You will need to add the following to your .photobanner CSS:

    animation-play-state: running;
animation: bannermove 30s linear infinite;

    Here is an example codepen of the same reference you've provided, but in a working state: https://codepen.io/anon/pen/mPXgbW