Hi All,

I want to make some simple animated backgrounds for a clients websites. Probably something like rotating and drifting hexagons.

Any advice on an easy way to do this?

Regards

Rich

It's CSS3 you will need to utilise for animations - HTML5 is just the mark-up language. The tutorial below provides a pretty good introduction to animations with CSS3:

 

https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068

 

You would need to look specifically at transforms and translate to make moving shapes, as seen below:

 

https://css-tricks.com/almanac/properties/t/transform/

 

These two resources should give you enough to get started. I should probably point out that with these animations comes a lot of considerations. For example, browser compatibility and responsiveness to name a few. They should be used sparingly and in my opinion it's usually better to avoid "gimmicky" designs.

It depends what you want to do. For basic animations you can just use CSS animate. or even just a transition - this is how I do most subtle animations.

 

If you want something more complex like timelines I would look to a JavaScript library like GSAP. Doing timelines in CSS is very error prone with a lot of magic numbers.

 

 

It should be mentioned that animations should add to the user experience and not be distracting. Things like parallax are often just thrown in to make things look cool and hip, but are often frustrating for visitors. Especially when most of them have terrible performance implications due to the way they have been written.
So ask yourself is there any real benefit in animated backgrounds? I would argue that they could be more of a detriment than an enhancement.

Edited March 6, 20179 yr by rbrtsmith