JAVASCRIPT пример кода анимации с применением функции таймера интервалов setInterval, смена состояний блоков (три блока) происходит последовательно каждые 0.5 секунд
var t;
var flag=0;
function timer() {
//t = setTimeout(show, 2000);
t = setInterval(show, 500);
}
function show() {
if(flag==0)
{
document.getElementById("blue-block").style.display = "none";
document.getElementById("green-block").style.display = "none";
document.getElementById("orange-block").style.display = "block";
flag=1;
}
else if(flag==1)
{
document.getElementById("blue-block").style.display = "none";
document.getElementById("green-block").style.display = "block";
document.getElementById("orange-block").style.display = "none";
flag=2;
}
else
{
document.getElementById("blue-block").style.display = "block";
document.getElementById("green-block").style.display = "none";
document.getElementById("orange-block").style.display = "none";
flag=0;
}
}
Код CSS
#orange-block {
display: none;
background-color:orange;
width:200px;
height:200px;
}
#green-block {
display: block;
background-color:#32cd32;
width:200px;
height:200px;
}
#blue-block {
display: none;
background-color:#6c92af;
width:200px;
height:200px;
}
Код html
<body onload="timer()" style="margin:0;"> <div id="green-block"></div> <div style="display:none;" id="orange-block" ></div> <div style="display:none;" id="blue-block" ></div></div>
Пример анимации на CSS JavaScript смены цвета блока div (трех состояний) в соответствии с установленным временем
Ваш комментарий будет первым