Animating the appearance of a title with CSS
This can be achieved with one element and a CSS pseudo-element.

The html

&lt;element class="animate right"&gt;Hello world!&lt;/element&gt;



Add the animate class to any element that will have this animation 
applied to it. 
Add a left or right class in order to specify which direction the animation should travel


The pseudo-element

.animate::before {
    content: '';
    position: absolute;
    background: #ff0;
    width: 100%;
    top: 0;
    bottom: 0;
}


The pseudo element is positioned absolute, 100% in width and stretched from top to bottom with top: 0 and bottom: 0.

There are two animations, left and right which have their own class:

.right::before {
    animation: sliderRight 2s forwards;
}

.left::before {
    animation: sliderLeft 2s forwards;
}


The animate class

Any element that you want to add this animation to will be given this class:

.animate {
    position: relative;
    color: transparent;
    padding: 10px;
    overflow: hidden;
    display: inline-block;
    margin: 20px;
    animation: textappear .1s .5s forwards;
}



The position: relative will make the position: absolute ::before pseudo-element child position itself relevant to the .animate parent.
The element must be inline otherwise the wiping animation will take the entire width of the screen (unless you use a width)
The overflow: hidden will cut off the animation correctly


The sliding animations

@keyframes sliderRight {
    0% {
        right: 100%; /*Push the element 100% from the right side*/
    }

    100% {
        right: -100%; /*Pull the element from left to right*/
    }
}

@keyframes sliderLeft {
    0% {
        left: 100%; /*Push the element 100% from the left side*/
    }

    100% {
        left: -100%; /*Pull the element from right to left*/
    }
}


Complete example



.animate {
  position: relative;
  color: transparent;
  padding: 10px;
  overflow: hidden;
  display: inline-block;
  margin: 20px;
  animation: textappear .1s .5s forwards;
}
.animate::before {
  content: '';
  position: absolute;
  background: #ff0;
  width: 100%;
  top: 0;
  bottom: 0;
}
.right::before {
  animation: sliderRight 2s forwards;
}
.left::before {
  animation: sliderLeft 2s forwards;
}
@keyframes textappear {
  100% {
    color: #FFFE02;
  }
}
@keyframes sliderRight {
  0% {
    right: 100%;
  }
  100% {
    right: -100%;
  }
}
@keyframes sliderLeft {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
/*Demo only*/

.animate {
  white-space: nowrap;
}
h1.animate {
  font-size: 5em;
}
body {
  margin: 0;
  padding: 0;
  background-color: #FE4D3D;
  font-family: arial;
}
&lt;h1 class="animate right"&gt;Hello World!&lt;/h1&gt;
&lt;p class="animate left"&gt;Hello World!&lt;/p&gt;