Text animation is easy to create and useful in terms of adding multiple words to display the services or describe a product. It is somewhat similar to the slider but eliminates the need to add any javascript or css library which only slows down the speed of the site. The wonderful animation created in this example uses minimum HTML and CSS.
Here is the HTML structure, copy it to your editor. The fixed word on the design is added in the paragraph tag and the list of words that will scroll are taken in unordered list.
Now, by adding a few simple lines of css the above structure will be animated. Mainly, the structure is provided with a fixed height and overflow hidden, which hides the other words and just scroll the inner content up and down to create the animation effect given in the example. Further, the animation effect is applied by using keyframes that set the position of origin and end of the animation.
Here is the final output of the code.