HTML -Marquee Animation style with CSS

Marquee Style

<html>
<head>
<title>Marquee Style</title>
<style>
#wrapper {
  width: 100%;
  background-color: white;
  position: relative;
  height: 110px;
  line-height: 20px;
  margin: 1em auto;
  overflow: hidden;
}

div.marquee {
  position: absolute;
  text-align: center;
  animation-name: marquee;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@keyframes marquee {  from {    left: 60%;  }
to {    left: -5em; } }
img{height:100px;width:100px;border:2px solid black;float:right;}
</style>
<head>
<div id="wrapper">
 <div class="marquee">
<table><tr><td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td></tr></table>
 </div>
</div>
<html>

0 comments:

Post a Comment

My Instagram