Image resize keeps repeating itself - html

Question

I am trying to make a fairly simple web page, having a banner image
and a simple animation (marquee emulation). I want to have a responsive image
in the page. The problem is that whenever the animation loop iterates, the image resize repeats itself.
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
background-color: red;
}
.marquee:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.fixed-ratio-resize{
height:auto;
max-width: 90%;
}
<img src="image.png" class="fixed-ratio-resize" alt="banner" />
<p class="marquee">
Do not use marquee tag for improve accessibility and readability.
</p>
I would like to "disengage" the animation from the image resize, ie to have the image resized only when the viewport is changed.
MTIA

Answer 1

If you need responsive image then you have to follow this code on your fixed-ratio-resize css. you can set width:90% if you want.
.fixed-ratio-resize {
height: auto;
width: 100%;
display: block;
margin: 0 auto;
}
Here is an example with marquee emulation. With 90% of image width. If you have any question ask me in comment.
#keyframes marquee {
0% { text-indent: 430px }
100% { text-indent: -485px }
}
#-webkit-keyframes marquee {
0% { text-indent: 430px }
100% { text-indent: -485px }
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 17s linear infinite;
-webkit-animation: marquee 17s linear infinite;
background-color: red;
}
.marquee:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.fixed-ratio-resize {
height: auto;
width: 90%; /*YOU CAN USE 100% if you want */
display: block;
margin: 0 auto;
}
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="fixed-ratio-resize" alt="banner ">
<p class="marquee">Do not use marquee tag for improve accessibility and readability.</p>