In this post, we have brought an effect for the text that can be placed on a website with a dark theme. This effect cuts the text and brings it from the right side of the page to the middle of the page. The text is arranged in the middle of the page and the characters are in place. After a few seconds, the text is cut again to the left of the page. The text color is pale yellow and the font is relatively large. All letters are also capitalized.


HTML
<!-- This script got from www.devanswer.com -->
<div class="deconstructed">
    DEVANSWER.COM
    <div>DEVANSWER.COM</div>
    <div>DEVANSWER.COM</div>
    <div>DEVANSWER.COM</div>
    <div>DEVANSWER.COM</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: black;
}
.deconstructed {
    position: relative;
    margin: auto;
    height: 0.71em;
    color: transparent;
    font-family: 'Cambay', sans-serif;
    font-size: 10vw;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.03em;
}
.deconstructed > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #ffff64;
    pointer-events: none;
}
.deconstructed > div:nth-child(1) {
    -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
    mask-image: linear-gradient(black 25%, transparent 25%);
    animation: deconstructed1 5s infinite;
}
.deconstructed > div:nth-child(2) {
    -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
    mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
    animation: deconstructed2 5s infinite;
}
.deconstructed > div:nth-child(3) {
    -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
    mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
    animation: deconstructed3 5s infinite;
}
.deconstructed > div:nth-child(4) {
    -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
    mask-image: linear-gradient(transparent 75%, black 75%);
    animation: deconstructed4 5s infinite;
}
@keyframes deconstructed1 {
    0% {
        transform: translateX(100%);
    }
    26% {
        transform: translateX(0%);
    }
    83% {
        transform: translateX(-0.1%);
    }
    100% {
        transform: translateX(-120%);
    }
}
@keyframes deconstructed2 {
    0% {
        transform: translateX(100%);
    }
    24% {
        transform: translateX(0.5%);
    }
    82% {
        transform: translateX(-0.2%);
    }
    100% {
        transform: translateX(-125%);
    }
}
@keyframes deconstructed3 {
    0% {
        transform: translateX(100%);
    }
    22% {
        transform: translateX(0%);
    }
    81% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-130%);
    }
}
@keyframes deconstructed4 {
    0% {
        transform: translateX(100%);
    }
    20% {
        transform: translateX(0%);
    }
    80% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-135%);
    }
}