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
For Elementor free, give your element a class name, and replace ‘selector’ instances with ‘.yourclassname’
More instructions in the video!
Play Video
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) } }