CODEWITHSUNDEEP
htmlcsscss-animations
Mack Rusing
Mack Rusing

Reputation: 13

CSS animation-delay not making a delay before animation start

My website has a simple CSS animation, and I want to have the animation start after two seconds. I tried using animation-delay but it isn't working. Please let me know what I'm doing wrong.

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

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


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

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}
<body>
  <h1 class="type-animation">A Website.</h1>
</body>

Upvotes: 1

Views: 1048

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

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>

However my guess is that isn't the result you were looking for! I presume you also want the elements to be hidden until the animation starts.

These are the lines you need to add in the element itself:

h1.type-animation {
  /* 1. Start with the element hidden */
  visibility: hidden;  
   /* 2. This keeps it visible after the animation ends (when visibility is on in the last keyframe) */
  animation-fill-mode: forwards;
}

... and in the keyframes:

@keyframes type {
  0% { 
    /* 3. Turn visibility on when animation starts */
    visibility: visible;
  }
  100% {
    /* 4. This along animation-fill-mode will keep visibility after animation ENDS */
    visibility: visible;    
  }
}

See it working:

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

h1.type-animation {
  visibility: hidden;
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 3s steps(10, end);
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
    visibility: visible;
  }
  100%{
    visibility: visible;
  }
}

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}
<body>
  <h1 class="type-animation"><span>A Website.</span></h1>
</body>

Upvotes: 1

Krish
Krish

Reputation: 47

If you want to create a typing effect, the above mentioned code snippet method by you is not ideal and efficient.

Here's a typing effect code snippet with a 2s animation delay. I have inserted a simple setTimeout function in javascript using which is triggered on loading the DOM so the text will not be visible beforehand but only after 2s when the animation is scheduled to start.

window.addEventListener('load',(event)=>{
    
  const timer = document.querySelector('.type');
    setTimeout(function(){
      timer.style.opacity = 1;
  },2000);
  

})
/* GLOBAL STYLES */
body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.type{
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
 animation-delay: 2s;
 opacity:0;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}
<div class="typewriter">
  <h1 class="type">A website.</h1>
</div>

Upvotes: 0

Related Questions