Skip to content

Add Clipping Reveal CSS Effect

  • css
/*ADD CLIPPING REVEAL FOR FADEIN ANIMATIONS*/
.wpb_animate_when_almost_visible.wpb_fadeInRight.animated img,
.wpb_animate_when_almost_visible.wpb_fadeInLeft.animated img {
    -webkit-clip-path: inset(0 -1px 0 -1px);
    clip-path: inset(0 -1px 0 -1px);
}
.wpb_animate_when_almost_visible.wpb_fadeInRight img {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
}
.wpb_animate_when_almost_visible.wpb_fadeInLeft img {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
    transition: clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s,-webkit-clip-path .8s cubic-bezier(.45,.05,.15,.93) .2s;
}

Dieser Beitrag hat 0 Kommentare

Schreibe einen Kommentar

Deine E-Mail wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

An den Anfang scrollen