Web Design & Development

Animate The Skew Of An Image

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 the transform property.
  • Both elements are then animated by creating a new set of keyframes for each.

Subtle but effective.

Need help?

Tell us about your project!

This field is for validation purposes and should be left unchanged.

Related articles