Djavastik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test {
color: #FF0000;
transition: .1s;
display:block;
font-size: 24px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".test"), function(el,i) {
var color = 0;
function fz() {
el.style.color = "rgb(" + 255 + "," + color + "," + color + ")";
color += 20;
if (color < 255) {
setTimeout(fz, 100);
} else {
el.style.color = "rgb(255,255,255)";
return;
}
};
setTimeout(fz, 1200 * i);
});
});
</script>
</head>
<body >
<span class="test">- Здравствуйте, взвесьте пожалуйста килограмм масла</span>
<span class="test">- О, вы знаете... у нас есть маргарин</span>
<span class="test">- То есть... масла у вас нет?</span>
<span class="test">- А чем вам не нравится наш маргарин?</span>
<span class="test">- Дело в том, что у нас пятизвёздочный ресторан</span>
<span class="test">- А у нас самый лучший маргарин на свете</span>
<span class="test">- Хорошо, взвесьте пожалуйста килограмм маргарина</span>
<span class="test">- Здравствуйте, что на бутерброде с икрой делает маргарин?</span>
<span class="test">- О, вы знаете... у нас самые лучшие бутерброды!</span>
<span class="test">- Но что на бутерброде за 1000 евро делает маргарин?</span>
<span class="test">- Вам не понравилось?</span>
<span class="test">- Дело в том, что нам бы хотелось отведать лучшего масла, с лучшей икрой в лучшем ресторане города</span>
<span class="test">- Да, но вы сами продали нам маргарин</span>
</body>
</html>