.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