setting time delay between two animation with javascript

Question

I am looking for having a time delay between the seconds box expanding and then after few seconds , the box shadowing. I have tried using setInterval but to no good. Is there any other clean way to do it?

setInterval(clock,1000);
function clock(){
var d = new Date();
document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}
function myfunction(){
 var object = document.getElementById("seconds");
    object.style.padding = "100px";
    object.style.boxShadow = "0px 0px 15px black";
    
}

div{
    position:absolute;
    left:100px;
    top:100px;
 text-align:center;
    border:5px solid grey;
    padding:15px;
    margin:0;
    transition:0.3s;
 }
    div:hover{
    box-shadow:0px 5px 5px black;
    }
 p:nth-child(2){
    width:100px;
    border:1px solid black;
    background-color:lightyellow;
    }
    p:nth-child(3){
    width:100px;
    border:1px solid black;
    background-color:lightblue;
    }
    p:nth-child(4){
    width:100px;
    border:1px solid black;
    background-color:lightgreen;
    transition:.5s;
    }

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
<p>Casio</p>
<p id="hour"></p>
<p id="minutes"></p>
<p id="seconds"></p>
</div>

Possible duplicate of [Callback on CSS transition](https://stackoverflow.com/questions/2087510/callback-on-css-transition) — Sebastian Simon, Jun 16 '18 at 10:33

Asons · Accepted Answer · 2018-06-16T11:05:01.147

You accomplish that by adding multiple properties for the transition property and set a delay on, in your case, the box-shadow property, here with 1s

transition: padding .5s, box-shadow .5s 1s;

Stack snippet

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  object.style.boxShadow = "0px 0px 15px black";

}

div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: padding .5s, box-shadow .5s 1s;
}

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>

Based on a comment, here is how one could use setTimeout for the delay

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  setTimeout(function() {
    object.style.boxShadow = "0px 0px 15px black";
  }, 1000);
}

div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: .5s;
}

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>

Isn't there a code like a statement that I can put in between. That would be much easier to see where the breaks are. — Goldensquare, Jun 16 '18 at 11:00
@Goldensquare You could add the `transition` dynamically as well, still, will update with a 2nd sample in a sec. — Asons, Jun 16 '18 at 11:02
Thank you. Just one thing, I am curious, in the first snippet, where box-shadow .5s 1s Here .5s should be same as padding .5s so as to synchronise the second animation after the first, right? — Goldensquare, Jun 16 '18 at 11:08
@Goldensquare In the first snippet, the `.5s` is each transition's _duration_, the `1s` for `box-shadow` is the _delay_ before the transition start. This mean you can choose each property's duration _and_ delay individually. — Asons, Jun 16 '18 at 11:13

setting time delay between two animation with javascript

1 Answers1