Вариант
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition:all .4s 0 ease;
}
span { font-size:10pt; }
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el) {
var opa = 1, fs = 10;
void function fz() {
el.style.opacity = opa;
el.style.fontSize = fs + "pt";
opa -= 0.1, fs -= 1;
if (opa > 0) {
setTimeout(fz, 400);
} else {
el.style.opacity = 0;
el.style.fontSize = 0;
return;
}
}();
});
});
</script>
</head>
<body >
<span>По</span>
<span class="test"> длинной</span>
<span> дороге идёт</span>
<span class="test"> большой</span>
<span> ослик и помахивает</span>
<span class="test"> коротким</span>
<span> хвостиком, отгоняя</span>
<span class="test"> назойливых</span>
<span> мух.</span>
</body>
</html>
Не смог добиться плавного изменения размера
