Create an image-animation using CSS3

Okay. I have a preview-image from a videofile, which is basically one continous (very wide) image, with screenshots of frames from the video.

This was part of some complicated javascript BS, and I was thinking - this should be possible to do with CSS alone - at least I think it should.

On display, the image shows up with the first (leftmost) frame.

What I want is as soon as you hover over the image, it starts scrolling right, one frame at the time, preferably looping at the end, but that isn't strictly necessary.

The width of the frames are known, so that's not the issue.

I'm a little at a loss, though - is this possible with CSS3? If it is, does anyone have anything similar I can read up on? I'm not really fluent in CSS3 animation, so some guides would help.

I've tried googling, but mostly what I find are regular sliders, based on multiple images - which I don't have.

 

Are you averse to slicing the image you have to make a series of individual shots?

gary

 

[addendum] Like you, I'm not proficient with css animation. I did work with it long enough to make it work for me, but the issue is that I find animation to be annoying. By annoying, I mean it sucks hind teat on a boar hog.

I am reminded of a Heinlein character discussing humor. There are funny always jokes and there are funny once jokes. Animation is a funny once joke.

gary

 

@PoPSiCLe you can try something like this:

https://jsfiddle.net/wef00gxe/4/

Setting animation: moveSlideshow 0s linear infinite; to greater than 0s will scroll the frames by default (the greater the number the slower they'll move).

PS It's using a split image to create that color scroll on hover. When you change it to your own image it will not be doing that, obviously. Why am even explaining this to you?

 

I would prefer not - this is automated (the generation of the image), and I have no idea how I would do that (splitting it, I mean).

I do agree with that. The point of this is to create a semi-fluid "animation" / preview of the linked video, without using a smaller video to do that.

I will have a look [/QUOTE]

 

Thanks! That was actually a very good starting point. Since I'm gonna be using this on several different images on the same page, I need to make some minor changes, but it seems to be exactly what I need. Need to figure out how to make some of the attributes be dynamically assigned, but that shouldn't be too difficult. Thanks again!

 

An additional example which looks related:
http://jsfiddle.net/simurai/CGmCe/

But CSS animation-play-state needs to be there too, in order to make it hover-based:

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: myanim 5s steps(10) infinite;
    animation-play-state: paused;
}

@keyframes myanim {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

.hi:hover{
  animation-play-state:running;
}

Code (CSS):

Refs:

• https://developer.mozilla.org/en-US...unction#The_steps()_class_of_timing-functions
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state