.revealLTR,
.revealRTL,
.revealTTB,
.revealBTT {
position: relative;
overflow: hidden;
}
.revealLTR[data-aos=fade].aos-animate > *,
.revealRTL[data-aos=fade].aos-animate > *,
.revealTTB[data-aos=fade].aos-animate > *,
.revealBTT[data-aos=fade].aos-animate > * {
animation: fadeIn 0s 0.6s;
animation-fill-mode: backwards;
}
.revealLTR[data-aos=fade]:not[.aos-animate],
.revealRTL[data-aos=fade]:not[.aos-animate],
.revealTTB[data-aos=fade]:not[.aos-animate],
.revealBTT[data-aos=fade]:not[.aos-animate] {
opacity: 0;
}
.revealLTR[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateX(-100%);
animation: revealInLTR 0.6s 0s, revealOutLTR 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealRTL[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateX(100%);
animation: revealInRTL 0.6s 0s, revealOutRTL 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealTTB[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateY(-100%);
animation: revealInTTB 0.6s 0s, revealOutTTB 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealBTT[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
animation: revealInBTT 0.6s 0s, revealOutBTT 0.6s 0.6s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes revealInLTR {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes revealOutLTR {
0% {
transform: translateX(0);
}
100% {
transform: translateX(101%);
}
}
@keyframes revealInRTL {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes revealOutRTL {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-101%);
}
}
@keyframes revealInTTB {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes revealOutTTB {
0% {
transform: translateY(0);
}
100% {
transform: translateY(101%);
}
}
@keyframes revealInBTT {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes revealOutBTT {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-101%);
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter