Text Slide Animation uing Elementor Pro

CSS Code for Text Slide Animation

:root{
    --myText : 'I am WP Care Plus';
    --textColor: #f5af2a;
    --textStroke: 2px;
    --anDuration: 6s;
}
selector{
    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}
selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

Template Link

Text Slide Animation – Readymade Elementor Templates | WP Care Plus

Watch the Tutorial on Instagram

View this post on Instagram

A post shared by WP Care Plus | Web Designer (@wpcareplus)