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

Sebastian Simon
– Sebastian Simon

2018-06-16 10:33:15 +00:00
Commented Jun 16, 2018 at 10:33 — Sebastian Simon
– Sebastian Simon, Commented Jun 16, 2018 at 10:33

Asons · Accepted Answer · 2018-06-16 11:05:01Z

1

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>

edited Jun 16, 2018 at 11:05

answered Jun 16, 2018 at 10:45

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Goldensquare Over a year ago

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.

Asons Over a year ago

@Goldensquare You could add the transition dynamically as well, still, will update with a 2nd sample in a sec.

Asons Over a year ago

@Goldensquare Updated with a 2nd sample

Goldensquare Over a year ago

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?

Asons Over a year ago

@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.

Collectives™ on Stack Overflow

setting time delay between two animation with javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest