HTML -Marquee Animation style with CSS
<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>
<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>
Post a Comment