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-path
property. - There is an extra background animation added via a
::before
pseudo element which is skewed via thetransform
property. - Both elements are then animated by creating a new set of
keyframes
for each.