Delaying CSS3 Animations

CSS Animation Timing Issue on Delay

You have one animation that runs evert 2 seconds and another one that runs for 2.1 seconds, of course they won't sync.
What you can do is set the delay in the keyframes, so instead of 0% it will start in a different value.

For example:

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  border-radius: 50%;
  margin: 50px auto;
  animation: containerAnimation 2s infinite;
}

.animated-border {
  position: absolute;
  left: 0;
  width: 97px;
  height: 97px;
  border: 2px solid;
  border-radius: 50%;
  animation: borderAnimation 2s infinite;
}

@keyframes containerAnimation {

  0% {
    transform: scale3d(0.9, 0.9, 1); // I've changed it to be more noticable.
  }

  5% {
    transform: scale3d(1.05, 1.05, 1);
  }
  
  100% {
    transform: scale3d(1.05, 1.05, 1);
  }
}

@keyframes borderAnimation {
  5% { // Start from here instead from 0%.
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(2, 2, 1);
    opacity: 0;
  }
}

<div class="container">
  <div class="animated-border"></div>
</div>

Delay Animation with CSS only

Need to keep the same transform of couple of moment then trigger next. Please follow the code below and you will understand what I mean.

.im {
  float: left;
  margin-right: 0.3em;
}

.im-wrapper {
  display: flex;
  height: 1.1em;
}

.im-items {
  overflow: hidden;
}

.im-item {
  display: block;
  height: 100%;
  color: $primary;
  animation: move 10s infinite;
  animation-delay: 1s;
  white-space: nowrap;
}

/* Here is the different */
@keyframes move {
  0% {
    transform: translateY(0%);
  }
  10% {
    transform: translateY(-100%);
  }
  20% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(-200%);
  }
  40% {
    transform: translateY(-200%);
  }
  50% {
    transform: translateY(-300%);
  }
  60% {
    transform: translateY(-300%);
  }
  70% {
    transform: translateY(-400%);
  }
  80% {
    transform: translateY(-400%);
  }
  90% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(0%);
  }
}

<div class="hero-top-title">
    <div style="display: inline-block;">
        <div>Hi</div>
    </div>, I'm
    <div style="display: inline-block;">
        <div>A Person</div>
    </div>.
    <br>
    <div class="im">Am I a</div>
    <div class="im-wrapper">
        <div class="im-items">
            <div class="im-item im-item1">Father</div>
            <div class="im-item im-item2">Mother</div>
            <div class="im-item im-item3">Brother</div>
            <div class="im-item im-item4">Sister</div>
            <div class="im-item im-item5">Grandma</div>
        </div>
        <div>?</div>
    </div>
</div>

CSS: animation delay on only one animation

I added a delay of 4 secs to the final animation below. For visibility purpose, I set the duration of each animation to 2 secs.

div {  width: 200px;  height: 200px;  opacity: 0.3;  background-color: darkgray;  animation:2000ms radius-in forwards, 2000ms opacity-in forwards, 2000ms 4000ms opacity-out forwards;}
@keyframes radius-in {from { border-radius: 0; }to { border-radius: 25px; }}
@keyframes opacity-in {from { opacity: 0; }to { opacity: 1; }}
@keyframes opacity-out {from { opacity: 1; }to { opacity: 0.3; }}

<div></div>

CSS multiple animation with different delay

Add the delay after the easing (AKA timing-function) value.

div{
  width: 200px;
  height: 200px;
  background: red;
  animation: animScale 2000ms ease-in-out 1000ms infinite,
             animOpacity 2000ms ease-in-out 2000ms infinite;
  /* scale will start after 1s and opacity after 2s (1s after the scale)*/
}

the values being:

animation-name: name

animation-duration: 0

animation-timing-function: ease

animation-delay: 0

animation-iteration-count: 1

animation-direction: normal

animation-fill-mode: none

animation-play-state: running

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://drafts.csswg.org/css-animations/#animation

CSS animation-delay not making a delay before animation start

You are overwriting your animation-delay: 2s; with the animation shorthand rule underneath.

Move the animation-delay after the animation rule like this:

h1.type-animation {
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 1.5s steps(10, end);
  animation-delay: 2s;
}

and the delay will work, as you can see in this snippet:

.type-animation {
  box-shadow: .6em 0 0 #00CCC7;
  overflow: hidden; 
  white-space: nowrap;
}

h1.type-animation {
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 1.5s steps(10, end);
  animation-delay: 2s;
}

@keyframes type {
  0% {
    width: 0;
  }
}

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}

<body>
  <h1 class="type-animation">A Website.</h1>
</body>

Elements with animation delay briefly appear before fading in using purely CSS3 Keyframes (no JS)

While the option suggested by Vito is not wrong, it is better to actually achieve this using properties or settings that are specifically designed for this purpose.

The element is visible at start because during the animation's delay period, the properties specified in the @keyframe rules will not have any effect on the element. The element would continue to be in the state that is mentioned outside of the @keyframes. Here there is no opacity specified outside of the @keyframe rules and so the default value of 1 is used and the element becomes visible.

Below is what the CSS specs for Animations say about this:

Furthermore, typically an animation does not affect the computed value before the animation delay has expired or after the end of the animation, but may do so depending on the animation-fill-mode property.

Once the animation starts (that is, the delay expires), the element will get the properties specified with in the @keyframes rules applied to it (depending on the animation's progress from 0 - 100). So, its first invisible then becomes visible as it slides in.

The way to force the browser to apply the properties specified within the @keyframes rules during the delay period is to use animation-fill-mode as backwards. But in your case, the animation fill mode is already set as forwards and hence you should change it to both. A value of both means that it will respect the specifications of both forwards (that is, hold the state as at last keyframe once the animation is completed) and also of backwards (that is, hold the state as at its first keyframe when it's in the delay period).

Below is an extract from the MDN page on animation-fill-mode property:

backwards

The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction:

both

The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

In short, the below is what you need to do. Note, the change that I've made at the end of animation property's value. I've left out the other properties for brevity, they are present in the demo.

.header-banner h2 {
  /* other props removed for brevity */
  animation: slide-in 1s 0.2s both;
}

.header-banner a {
  animation: slide-in 1s 0.4s both;
}

@charset "UTF-8";
/* CSS Document */

/***************************************************************
               GENERAL
***************************************************************/
* {  font-family: 'Varela', sans-serif;}
body {  padding: 0;  margin: 0;  background-color: rgb(90, 120, 240);}
a {  text-decoration: none;  color: inherit;  font-size: inherit;}

/***************************************************************
               HEADER
***************************************************************/

/*****************************      BANNER*****************************/
.header-banner {  display: flex;  flex-direction: column;  justify-content: space-between;  align-items: center;  margin-top: 30px;  height: 250px;  -webkit-animation: slide-in 1s;  -moz-animation: slide-in 1s;  -o-animation: slide-in 1s;  animation: slide-in 1s;}
.header-banner h1,.header-banner h2,.header-banner a {  font-family: 'Varela', sans-serif;  color: white;  text-align: center;  padding: 0 40px;  margin: 10px 0;}
.header-banner h2,.header-banner a {  font-weight: normal;}
.header-banner h1 {  font-size: 3em;  -webkit-animation: slide-in 1s;  -moz-animation: slide-in 1s;  -o-animation: slide-in 1s;  animation: slide-in 1s;}
.header-banner h2 {  font-size: 1.5em;  -webkit-animation: slide-in 1s 0.2s both;  -moz-animation: slide-in 1s 0.2s both;  -o-animation: slide-in 1s 0.2s both;  animation: slide-in 1s 0.2s both;}
.header-banner a {  font-size: 1.1em;  font-weight: bolder;  padding: 15px 40px;  border-radius: 5px;  letter-spacing: 0.05em;  background-color: rgb(0, 221, 221);  box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);  transition: 0.3s ease-in-out;  margin-top: 60px;  -webkit-animation: slide-in 1s 0.4s both;  -moz-animation: slide-in 1s 0.4s both;  -o-animation: slide-in 1s 0.4s both;  animation: slide-in 1s 0.4s both;}
.header-banner a:hover {  transition: 0.3s ease-in-out;  box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);  transform: translateY(-2px);}

/***************************************************************
              KEYFRAMES
***************************************************************/
@-o-keyframes slide-in {  0% {    transform: translateY(40px);    opacity: 0;  }  100% {    transform: translateY(0px);    opacity: 1;  }}
@-moz-keyframes slide-in {  0% {    transform: translateY(40px);    opacity: 0;  }  100% {    transform: translateY(0px);    opacity: 1;  }}
@-webkit-keyframes slide-in {  0% {    transform: translateY(40px);    opacity: 0;  }  100% {    transform: translateY(0px);    opacity: 1;  }}
@keyframes slide-in {  0% {    transform: translateY(40px);    opacity: 0;  }  100% {    transform: translateY(0px);    opacity: 1;  }}

<!doctype html><link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet"
 <header>   <div class="header-banner">     <h1><h1> element (no delay)</h1>     <h2>I'm an <h2> element with 0.2s of delay</h2>     <a href="about.html">I'm an <a> element with 0.4s of delay</a>   </div> </header>

CSS | Delay each individual animation by 2 seconds

.text-container{width: 100%;font-size: 14px;
  height: 20px;
  background:#c03022;
  color:#fff;
}

.dynamic-text{
  list-style: none;
  position: absolute;
  overflow: hidden;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
}

.item{
  position: relative;
  top: 0;
   animation: move 10s infinite;
  width: 100%;
  text-align:center;
}

@keyframes move{
     0% {
            top: 0px;
        }
        10% {
            top: 0px;
        }
        20% {
            top: -33px;
        }
        30% {
            top: -33px;
        }
        40% {
            top: -33px;
        }
        50% {
            top: -66px;
        }
        60% {
            top: -66px;
        }
        70% {
            top: -66px;
        }
        80% {
            top: -100px;
        }
        90% {
            top: -100px;
        }
        100% {
            top: -100px;
        }
}

<div class="text-container">
    <ul class="dynamic-text">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
          <li class="item"> </li>
          <li class="item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
          <li class="item"> </li>
          <li class="item">But I must explain to you how all this mistaken idea of denouncing</li>
          <li class="item"> </li>
          <li class="item">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
    </ul>
 </div>

---

Related Topics