Html5 animation

I attached in my sample model image..How to create a animation in html5 this model..?.
Please anybody help, and send step by step guide..?

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


Well, you have to explain better your question - do you want to have a video in your web page or as is on the JPG image applied rollover effect.

For video in HTML 5 you have next code:

<video class="rimg" controls="true" width="720" height="576" autoplay="true">
  <source src="yourvideo.mp4" type="video/mp4" />
  Your browser does not support the video tag.

Of course it is for video with MP4 extension. You have to put width and height of your own video because my values width="720" height="576" are for one of my video.

And this video have a name yourvideo.mp4. But, you can choose another name and rename to cards.mp4 or something else.

The command autoplay="true" enable that video will start immediately when your web page will be  shown in an browser. If you want to start it manually you can set autoplay="false".

And finally command controls="true" means that your video will be shown in player with buttons for start, pause, volume etc.

But, if you want to have a rollover than you have to put two images that you want to show.


If you think about some interactivity, you need to use html5 transitions and animations, here's very interesting article:

You may read this as well:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.