Smoothly changing text with JavaScript

Question

I\'m making a landing page where a phrase is constantly changing with select words. For instance,

Design better websites
made for clients.

Answer 1

Got some good answers.
Alin Purcaru has a much better and more coherently-written answer, but I thought I'd provide my own.

Nit had what I was looking for, but since I'm not the best programmer, I tried to come up with a solution I could understand. After an hour or two, here's what I got.

Basically, I'm comparing the full block of text to the parent element, finding the space between them, halving it, and then applying that as a negative margin to the text. I can transition this with CSS since I'm moving a full block.

Here's a very bad drawing in MSpaint to illustrate my point

the text has display: inline-block so the div fits to the text rather than taking up 100% of the parent.

Since I was transition with CSS in my javascript, all I needed to do to make it smooth was

  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;