Can CSS3 animations do this?

HTML & CSS
1

I have an mp4 movie file that consists of basic graphic elements over a gradient background. The elements slowly rotate in place and the movie just loops infinitely. The movie file is over 5mb, so I’m looking to convert the movie file to CSS3.

I haven’t attempted CSS3 animations to this level before (I’ve only done basic stuff like fades). I’m looking to get some advice and suggestions on how to convert this MP4 into a CSS3 animation of individual graphic elements that I can run in the background of my page (as if it were an animated background image).

2

I’ve not really gone into css animation yet, but I’m sure it can do that, if it can do this.
It should be more data efficient than video too.

3

Thanks the the example Sam. I was able to optimize the mp4 video down from 5800KB to 400KB running it through an online MP4 converter.

I’m still interested in any ideas/examples that animate similar to the movie objects.

4

I’m sure you could recreate the video by keyframing some SVGs. It would look clean at any res without the overhead of storing every frame as an image.

How does it look? Are you getting compression artefacts from the drop?

5

There’s a good article here that gives you all the tools you need to do this. I would be careful though that you don’t slow the page down with too many animations. Its basically a matter of setting @keyframe animation routines for each of the animations using the rotating trick mentioned in the article.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.