jquery animate - Move the background image of the div element with purely CSS -


i'm trying move background image of div element purely css. here i'm taking input background-image url user, thats why can't declare in css. cannot declare image position fixed or absolute affect rest of css. there way write css background of div element?

fiddle- jsfiddle.net/ztsg9

html:

<div class="view" style="background-image: url('http://css3slideshow.remabledesigns.com/1.jpg')">according new report anandtech, samsung might fibbing way more favorable galaxy s4 benchmarks. has device come crawl? of course hasn’t; benchmarks shouldn’t change perception of flagship powerful s4. still, it’s embarrassing samsung resort such technical tactics, allegedly using code dubbed “benchmarkbooster.” yes, device takes steroids.</div> 

css:

.view {     position:relative;     height:100%;     width:100%;     top:0;     left:0;     animation:mymove 5s infinite;     -webkit-animation:mymove 5s infinite;     /* safari , chrome */ } @keyframes mymove {      {          left:0px;      }      {          left:200px;      } } @-webkit-keyframes mymove /* safari , chrome */     {      {           leftp:0px;      }      {          left:200px;      } } 

the following trick seems work: make background image twice wide element , change horizontal part of background-position 0 -200% (edited fiddle):

.view {     height:100%;     width:100%;     animation:mymove 5s linear infinite;     background-size: 200% 100%; /* horizontal scale 200% */ } @keyframes mymove {     {         background-position: 0% 0px;     }     {         background-position: -200% 0px; /* shifting image right full width */     } } 

the arithmetic moves image when background-position negative percentage explained in answer.


Comments

Popular posts from this blog

c++ - Creating new partition disk winapi -

Android Prevent Bluetooth Pairing Dialog -

VBA function to include CDATA -