animation-delay

Property Variable Name

animation-delay

Available Values for animation-delay

1s|2s|5s|initial|inherit

Example using animation-delay 1s

Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3

Code

<style>
.demo-box-1 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
}
.demo-box-1 span {
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:100px;
  width:120px;
  left:10px;
  top:10px;
}
.dbs-1 {
  position:absolute;
  left:10px;
  top:10px;
  animation-name: my-animation-1;
  animation-duration: 5s;
  animation-timing-function: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay:1s;
}
</style>

<style>
@keyframes my-animation-1 {
  0% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
  50% { 
    padding-top: 0px;
    left:90%;
    top:50px;
  }
  100% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
}
</style>

<h2>Example using animation-delay 1s</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-1'>
  <span class='dbs-1'>Demo Box 1 Content 1</span>
</div>

Example using animation-delay 2s

Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3

Code

<style>
.demo-box-2 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
}
.demo-box-2 span {
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:100px;
  width:120px;
  left:10px;
  top:10px;
}
.dbs-2 {
  position:absolute;
  left:10px;
  top:10px;
  animation-name: my-animation-2;
  animation-duration: 5s;
  animation-timing-function: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay:2s;
}
</style>

<style>
@keyframes my-animation-2 {
  0% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
  50% { 
    padding-top: 0px;
    left:90%;
    top:50px;
  }
  100% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
}
</style>

<h2>Example using animation-delay 2s</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-2'>
  <span class='dbs-2'>Demo Box 2 Content 1</span>
</div>

Example using animation-delay 5s

Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3

Code

<style>
.demo-box-3 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
}
.demo-box-3 span {
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:100px;
  width:120px;
  left:10px;
  top:10px;
}
.dbs-3 {
  position:absolute;
  left:10px;
  top:10px;
  animation-name: my-animation-3;
  animation-duration: 5s;
  animation-timing-function: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay:5s;
}
</style>

<style>
@keyframes my-animation-3 {
  0% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
  50% { 
    padding-top: 0px;
    left:90%;
    top:50px;
  }
  100% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
}
</style>

<h2>Example using animation-delay 5s</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-3'>
  <span class='dbs-3'>Demo Box 3 Content 1</span>
</div>

Example using animation-delay initial

Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3

Code

<style>
.demo-box-4 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
}
.demo-box-4 span {
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:100px;
  width:120px;
  left:10px;
  top:10px;
}
.dbs-4 {
  position:absolute;
  left:10px;
  top:10px;
  animation-name: my-animation-4;
  animation-duration: 5s;
  animation-timing-function: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay:initial;
}
</style>

<style>
@keyframes my-animation-4 {
  0% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
  50% { 
    padding-top: 0px;
    left:90%;
    top:50px;
  }
  100% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
}
</style>

<h2>Example using animation-delay initial</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-4'>
  <span class='dbs-4'>Demo Box 4 Content 1</span>
</div>

Example using animation-delay inherit

Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3

Code

<style>
.demo-box-5 {
  position:relative;
  border-radius:3px;
  margin-bottom:10px;
  border:1px solid #000;
  height:220px;
  width:100%;
}
.demo-box-5 span {
  transition: all 0.3s;
  position:absolute;
  display:block;
  padding:10px;
  background:#3b7aa0;
  color:#FFF;
  margin:0 1%;
  height:100px;
  width:120px;
  left:10px;
  top:10px;
}
.dbs-5 {
  position:absolute;
  left:10px;
  top:10px;
  animation-name: my-animation-5;
  animation-duration: 5s;
  animation-timing-function: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-delay:inherit;
}
</style>

<style>
@keyframes my-animation-5 {
  0% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
  50% { 
    padding-top: 0px;
    left:90%;
    top:50px;
  }
  100% { 
    padding-top: 0px;
    left:10px;
    top:10px;
  }
}
</style>

<h2>Example using animation-delay inherit</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-5'>
  <span class='dbs-5'>Demo Box 5 Content 1</span>
</div>