Let's say I want my website to display "CSS" and, when hovered, make a *sliding* animation that results in displaying "Cascading Style Sheets".
I achieved a similar animation using the font size as a workaround ([Fiddle](https://jsfiddle.net/xqjes071/1/)) but I would like the words to slide from the initials.

Any idea on how this could be done using the simplest forms of CSS or JS ?

```css
p span {
  font-size: 0px;
  transition: all 0.3s ease-out;
}

p:hover span {
  font-size: 15px;
}
```

```html
<p>
  C<span>ascading</span>
  S<span>tyle</span>
  S<span>heets</span>
</p>
```