title: setting time delay between two animation with javascript
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
      
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="myfunction()"&gt;Change Seconds background settings&lt;/button&gt;
  &lt;div&gt;
  &lt;p&gt;Casio&lt;/p&gt;
  &lt;p id="hour"&gt;&lt;/p&gt;
  &lt;p id="minutes"&gt;&lt;/p&gt;
  &lt;p id="seconds"&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>