Html Question posted in
Some basic documentation can be found here.

Html – Making a delay in animation made using Animate css

I have an animation made using Animate css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide>div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
  }
  20% {
    top: -40px;
  }
  30% {
    top: -40px;
  }
  40% {
    top: -80px;
  }
  50% {
    top: -80px;
  }
  60% {
    top: -120px;
  }
  70% {
    top: -120px;
  }
  80% {
    top: -160px;
  }
  90% {
    top: -160px;
  }
  100% {
    top: 0px;
  }
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
  --animate-delay: 5s;
}
<div class="text-slide animate__animated animate__fadeIn">
  <div class="text-wrap">
    <div class="text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>

And what I want to achive that this whole div with class text-slide
appears on the screen 3 seconds after the site is loaded.

There’s an animation inside an animation, one made with pure css, and one with animate.css. I want to delay this made with animate.css. How to make it work?
I tried using --animate-delay: 5s; but it didnt help.

Tags:

2

Answers


  1. 0

    You need to add animate__delay-5s on the div instead, and remove the --animate-delay: 5s;.

    Looking at the cdn of animate.css, --animate-delay is only used by customizing animate__delay classes. By default animate_delay-5s means delaying 5 seconds, but if you set the custom property to 0.9s, animate_delay-5s actually means delaying 0.9s * 5 = 4.5 seconds. I don’t think this is a good idea as the class name doesn’t match what it does anymore.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide>div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
  }
  20% {
    top: -40px;
  }
  30% {
    top: -40px;
  }
  40% {
    top: -80px;
  }
  50% {
    top: -80px;
  }
  60% {
    top: -120px;
  }
  70% {
    top: -120px;
  }
  80% {
    top: -160px;
  }
  90% {
    top: -160px;
  }
  100% {
    top: 0px;
  }
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class="text-slide animate__animated animate__fadeIn animate__delay-5s">
  <div class="text-wrap">
    <div class="text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can achieve your goal using keyframes animation with a delay. Please see code below to get your effect. I’ve added some markup so you can see what happening.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide > div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }

  10% {
    top: 0;
  }

  20% {
    top: -40px;
  }

  30% {
    top: -40px;
  }

  40% {
    top: -80px;
  }

  50% {
    top: -80px;
  }

  60% {
    top: -120px;
  }

  70% {
    top: -120px;
  }

  80% {
    top: -160px;
  }

  90% {
    top: -160px;
  }

  100% {
    top: 0px;
  }
}

/* Div Class with animate shorthand to Delay the Animation*/
.text-slide {
  animation:fadeindelay 350ms ease-in backwards 3s;
}

/* Keyframes to the fade in Animation*/
@keyframes fadeindelay {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
    <div class="text-slide animate__animated animate__fadeIn">
  <div class="text-wrap">
    <div class="text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search