i am looking out for website custom CSS for the animation shown in the picture i Have attached

Design to animate like this:

Custom CSS:

I want to add this kind of animation in my office website, I don’t know how to do this kind of CSS, which tool I can use for it and if any one is having this kind of animation tool please provide me. I am able to create a whole block, but I am not able to do the same.

I have tried this

{
    content: "";
    width: 280px;
    height: 96px;
    border: 2px solid #ffc527;
    position: absolute;
    display: block;
    left: 50%;
    margin-left: -138px;
    text-align: center;
}

but how can I get the same design as it is covering whole text?