CSS animation

CSS animated mask




This animation is made of 3 elements:

  • A column with a background image: also used as a wrapper for the 2 other elements, it has an overflow: hidden; to hide the "donut" mask outer shape.
  • A "donut" mask: made of a <div> without a background, a huge border-width: 900px; and a border-radius: 100%; to make it circular.
  • A heading: made of 3 lines, each one in a different HTML tag to animate them at different tempos.

The column has the .av-mask-wrapper class

An HTML module with the 2 other elements is put inside the column, containing this code:

The elements are animated with the css-animation property.
Here's the whole CSS code, not responsive (yet) because of the difficulty to keep the mask aspect ratio and positions when resizing the screen: