Awesome Block Reveal Animations!

Instructions:

Watch the animations carefully, choose the one you like (use the replay button to watch them again)

Copy the code with the button right below the animation of your choice

On the Element you want this intro animation, paste it under Advanced > Custom CSS

Also set Advanced > Motion Effects to Fade In , Fast

Intro Templates 1

For Elementor free, give your element a class name, and replace ‘selector’ instances with ‘.yourclassname’

More instructions in the video!

Footer
Play Video
Play Video
Replay

center

Premium

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: black;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 1 0;
        -ms-transform-origin: 1 0;
            transform-origin: 1 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: white;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

center

Premium Explainer Videos

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: black;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 1 0;
        -ms-transform-origin: 1 0;
            transform-origin: 1 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: white;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

center

Premium Explainer Videos

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:  #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 1 0;
        -ms-transform-origin: 1 0;
            transform-origin: 1 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:#FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

off center

Premium Explainer Videos

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:  #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 74% 0;
        -ms-transform-origin: 74% 0;
            transform-origin: 74% 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:#FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

off center

Premium Explainer Videos

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:  #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 14% 0;
        -ms-transform-origin: 14% 0;
            transform-origin: 14% 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:#FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

Premium Explainer Videos

    
selector{
    min-height: 21vmin;
    min-width: 21vmin;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 51%;
    top:0;
    left:0;
    background-color:  #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 51%;
    top:0;
    left:0;
    background-color:#FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) 1.16s forwards;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

left

Premium Explainer Videos

    
selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

not full, left, opacity 0.78

Premium Explainer Videos

    
body:not(.elementor-editor-active) selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    opacity: 0.78;
    -webkit-animation: unclip 1.6s cubic-bezier(1,0,0,1) .6s forwards;
            animation: unclip 1.6s cubic-bezier(1,0,0,1) .6s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

body:not(.elementor-editor-active) selector.fadeIn{
        -webkit-animation: uncliptitle .9s cubic-bezier(1,0,0,1) .9s forwards;
                animation: uncliptitle .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

@-webkit-keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@-webkit-keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

not full, left

Premium Explainer Videos

body:not(.elementor-editor-active) selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: unclip 1.6s cubic-bezier(1,0,0,1) .6s forwards;
            animation: unclip 1.6s cubic-bezier(1,0,0,1) .6s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}


body:not(.elementor-editor-active) selector.fadeIn{
        -webkit-animation: uncliptitle .9s cubic-bezier(1,0,0,1) .9s forwards;
                animation: uncliptitle .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

@-webkit-keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@-webkit-keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

sliver,  left

Premium Explainer Videos

body:not(.elementor-editor-active) selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #000;
    z-index: 8;
    -webkit-animation: unclip 1.6s cubic-bezier(1,0,0,1) .14s forwards;
            animation: unclip 1.6s cubic-bezier(1,0,0,1) .14s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

body:not(.elementor-editor-active) selector.fadeIn{
        -webkit-animation: uncliptitle .9s cubic-bezier(1,0,0,1) .84s forwards;
                animation: uncliptitle .9s cubic-bezier(1,0,0,1) .84s forwards;
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

@-webkit-keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@keyframes unclip {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
}

@-webkit-keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes uncliptitle {
  0% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

not full, right

Premium Explainer Videos

body:not(.elementor-editor-active) selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: unclip_right 1.6s cubic-bezier(1,0,0,1) .6s forwards;
            animation: unclip_right 1.6s cubic-bezier(1,0,0,1) .6s forwards;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}


body:not(.elementor-editor-active) selector.fadeIn{
        -webkit-animation: uncliptitle_right .9s cubic-bezier(1,0,0,1) .9s forwards;
                animation: uncliptitle_right .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

@-webkit-keyframes unclip_right {
  0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@keyframes unclip_right {
  0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@-webkit-keyframes uncliptitle_right {
   0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
   }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes uncliptitle_right {
   0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
   }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

not full, right, opacity

Premium Explainer Videos

body:not(.elementor-editor-active) selector.fadeIn::after{
    opacity: .78;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: unclip_right 1.6s cubic-bezier(1,0,0,1) .6s forwards;
            animation: unclip_right 1.6s cubic-bezier(1,0,0,1) .6s forwards;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}


body:not(.elementor-editor-active) selector.fadeIn{
        -webkit-animation: uncliptitle_right .9s cubic-bezier(1,0,0,1) .9s forwards;
                animation: uncliptitle_right .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

@-webkit-keyframes unclip_right {
  0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@keyframes unclip_right {
  0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  49% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
       clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@-webkit-keyframes uncliptitle_right {
   0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
   }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes uncliptitle_right {
   0% {
-webkit-clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%,0 100%);
   }
  100% {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

up

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }



@keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }

up opacity 0.78

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    opacity: .78;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }



@keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }

down

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: yshowText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}



@-webkit-keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }



@keyframes yshowText{
      0%{
         -webkit-transform:scaleY(1);
                 transform:scaleY(1)
      }
      100%{
         -webkit-transform:scaleY(0);
                 transform:scaleY(0)
      }
    }

right

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
        }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
        }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

right then left

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }

left then right

Premium Explainer Videos

selector.fadeIn::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF3C3C;
    z-index: 9;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .16s forwards;
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

selector.fadeIn::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: #FF8484;
    z-index: 8;
    -webkit-animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
            animation: showText .9s cubic-bezier(1,0,0,1) .9s forwards;
    -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}



@-webkit-keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }



@keyframes showText{
      0%{
         -webkit-transform:scaleX(1);
                 transform:scaleX(1)
      }
      100%{
         -webkit-transform:scaleX(0);
                 transform:scaleX(0)
      }
    }