CSS animation

CSS animated mask

TALK ABOUT

YOUR FAVORITE

GARDEN

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:

    <div class="av-mask"></div>
    <div class="av-content">
	    <h2 class="headline1">TALK ABOUT</h2>
	    <h2 class="headline2">YOUR FAVORITE</h2>
	    <h2 class="headline3">GARDEN</h2>
    <div>

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:

.av-mask-wrapper .fl-col-content {
    position: relative;
    overflow: hidden;
    width: 1000px;
    height: 500px;
    margin: 0 auto;
}
.av-mask-wrapper .av-mask {
    position: absolute;
    top: -750px;
    right: -50%;
    width: 2000px;
    height: 2000px;
    border-radius: 100%;
    border: 1000px solid black;
    animation: donut 10s 3s ease-in-out infinite;
}
@keyframes donut {
    0% { top:-125%; right:-87%; border-width: 1000px; }
    15% { top:-160%; right:-20%; border-width: 850px; }
    35% { top:-125%; right:-87%; border-width: 950px; }
    45% { top:-150%; right:-50%; border-width: 900px; transform: scale(1); }
    65% { top:-150%; right:-50%; border-width: 900px; transform: scale(6); }
    85% { top:-150%; right:-50%; border-width: 900px; transform: scale(6); }
    100% { top:-150%; right:-50%; border-width: 1000px; transform: scale(1); }
}
.av-content {
    margin: 10% 5%;
}
.av-content h2 {
    position: relative;
    margin: 0;
    font-size: 3em;
    line-height: 1em;
    color: rgba(255,255,255,0);
    text-shadow: 2px 2px 20px rgba(0,0,0,.5);
    animation-duration: 10s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-delay: 3s;
}
.av-content h2.headline1 {
    animation-name: headline1;
}
.av-content h2.headline2 {
    animation-name: headline2;
}
.av-content h2.headline3 {
    animation-name: headline3;
}
@keyframes headline1 {
    5% { top: 80px; color: rgba(255,255,255,0); transform: scaleY(0); }
    10% { top: 0; color: rgba(255,255,255,1); transform: scaleY(1); }
    85% { top: 0; color: rgba(255,255,255,1); }
    95% { top: 0; color: rgba(255,255,255,0); }
}
@keyframes headline2 {
    7% { top: 80px; color: rgba(255,255,255,0); transform: scaleY(0); }
    13% { top: 0; color: rgba(255,255,255,1); transform: scaleY(1); }
    85% { top: 0; color: rgba(255,255,255,1); }
    95% { top: 0; color: rgba(255,255,255,0); }
}
@keyframes headline3 {
    9% { top: 80px; color: rgba(255,255,255,0); transform: scaleY(0); }
    14% { top: 0; color: rgba(255,255,255,1); transform: scaleY(1); }
    85% { top: 0; color: rgba(255,255,255,1); }
    95% { top: 0; color: rgba(255,255,255,0); }
}

CSS animation

CSS animation

CSS animated mask

TALK ABOUT

YOUR FAVORITE

GARDEN

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box