Vladimir93,
Вариант для современных браузеров ... меняет фон последних трёх div -- время из data - вопросы знатокам , почему не работает в хроме, почему не работает строка 44 без window.setTimeout и как заменить если можно window.setTimeout ... есть и ещё вопросы
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.animated {
transition: background-color 2s ease-out;
width: 150px;
height: 150px;
margin: 10px;
border: 1px solid black;
display: inline-block;
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div class="animated" data-duration="5s"></div>
<div class="animated" data-duration="5s"></div>
<div class="animated" data-duration=".7s"></div>
<div class="animated" data-duration="8s"></div>
<script> function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
function setBackgroundColor(elem, s) {
function go() {
var color = randomRGBColor()
elem.style.backgroundColor = color
}
elem.style.transitionDuration = s;
elem.addEventListener('transitionend', go, false);
go() //window.setTimeout(go, 0);
}
window.onload = function() {
[].forEach.call(document.querySelectorAll('.animated:nth-last-child(-n + 4)'), function(elem, i) {
setBackgroundColor(elem, elem.dataset.duration)
})
}
</script>
</body>
</html>