Ken Burns with CSS 3 - How Difficult to Do It

Question

Work with CSS3. I see no reason why the CSS burning effect of Ken will not work. My first attempt was to use jQuery to add a new class to the background image.

.flare1 { background-position:-50.1px -50.1px !important; -webkit-transition: all 5s ease-in-out; } function gallery() { $('.cornerimg').addClass('flare1'); } 

It worked, but terribly jerkily. Therefore, I am considering a different approach. How would it be if the images were set up with class animations from the start. I am not familiar with CSS3 animations, but only with transitions, however the goal is to apply a constant class to the series of images that Ken Burn has constantly written to them.

I have prepared a wonderful training ground for those who come up with a way. http://jsfiddle.net/gxUhH/10/

All settings are based on my source code.

Any ideas?

Wonderful

EDIT -

Good thing I found this, which seems very smooth. What I do not see is something else. Instead, they use the translation function in the web set, but when I tried, it just jumped. Take a look. http://thing13.net/2010/02/css3-ken-burns-effect-2/

Answer 1

Your movement is jerky because you can only move the background at least 1 pixel at a time. You can verify this by setting the background-position to 10px and the transition time to 10s linear , and you will see that once a second the image is shifted exactly one pixel.

One pixel may not seem very similar, but when you move slowly, it's pretty noticeable.

My solution would be to speed up the movement of the image. At least 20 pixels per second will be the minimum speed for smooth movement.

Unfortunately, until browsers perform hardware acceleration, you probably won’t get real-time subfetching again on background images.

Answer 2

You can do something similar for your CSS. (Set up if necessary)

 #gallery .imageitem { width:680px; height:380px; overflow:hidden; background-position:0px 0px; background-repeat:no-repeat; } .flare1 { -moz-animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-name: slide; -webkit-animation-name: slide; -moz-animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; } @-moz-keyframes slide { from { background-position: 0px; } to { background-position: -100px; } } @-webkit-keyframes slide { from { background-position: 0px; } to { background-position: -100px; } } .cornerimg { width:680px; height:380px; } 

http://jsfiddle.net/gxUhH/23/

Answer 3

I tried to quickly crack the code from protofunc that uses backgroundPosition jQuery . The plugin allows you to control the background position, for example:

 $(this).animate({'background-position': '500px 150px'}) 

I put a giant jpg as a background image on a small div. You can then start the animation by clicking or keeping within the callback events, and all the usual things jQuery can do. And it works very smoothly in Chrome on my machine.

After reading your question again, it doesn't use CSS3, though ... so it's not a very useful answer !: P

Answer 4

Well, guys don't ask me how, but through the keyframe animation, now it's smooth. http://jsfiddle.net/gxUhH/47/

Only one problem. When one scrolls the page on the touch device, it becomes a jerk. I think we need to pause it for scrolling and then play it again as soon as the scrolling is over.

Any ideas?