Sometimes its nice to add a little bit of constant motion to a website page element, to keep things a bit less “static”. One option is adding a looping animation to certain images. You can see an example of this here: https://jsfiddle.net/Garconis/f014vxuq/
As you will see, there are two separate animated pieces.
- The image itself is being “clipped” to an animated skewing, via the
clip-pathproperty. - There is an extra background animation added via a
::beforepseudo element which is skewed via thetransformproperty. - Both elements are then animated by creating a new set of
keyframesfor each.
Subtle but effective.
