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

Html – how to make my animation play every 5 seconds

hello guys i im trying to make a lightbulb effect that the text is flickering. but i dont want it to be flicker whole time, i want it to play every 5 sec instead of the whole time. i tried giving it delay but it only gives me a delay in the begin when de website loads.i use css, tailwindcss and react.js

*{
  color: white;

}
#hero {
  background-color: rgb(20, 20, 20);
}
.navbar {
  background-color: black;
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0),
    transparent 40%
  );
  z-index: 3;
  transition: background 0.1s ease-out;
}

.navbar:hover {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
}

.navbar > ul>a:first-of-type{
  animation: flicker 2s infinite alternate;
}
.navbar > ul>a:hover{
  text-shadow: 0px 0px 10px #00ffcc,
  0px 0px 20px #00ffcc,
  0px 0px 40px #00ffcc,
  0px 0px 80px #00ffcc;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%{
    opacity: 1;
    text-shadow: 0 0 5px #00ffcc,
    0 0 10px #00ffcc,
    0 0 20px #00ffcc,
    0 0 40px #00ffcc,
    0 0 80px #00ffcc;
    ;
  } 20%, 24%, 55%{
    opacity: 0.5;
    text-shadow: none;
  }
}
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { IconMoon } from '@tabler/icons-react';

function Navbar() {
  const NavbarContent = [
    "Home",
    "About",
    "Project",
    "Work Experience",
    "Contact",
  ];

  const handleMouseMove = (e) => {
    const navbar = document.querySelector(".navbar");
    const rect = navbar.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    navbar.style.setProperty("--mouse-x", `${x}px`);
    navbar.style.setProperty("--mouse-y", `${y}px`);
  };

  return (
    <div className="h-28 items-center flex flex-row-reverse">
      <div
        className="border-white/[0.2] navbar flex max-w-fit fixed inset-x-0 mx-auto border rounded-full px-4 py-2 items-center justify-center space-x-4 z-[5000]"
        onMouseMove={handleMouseMove}
      >
        <ul className="flex justify-between">
          {NavbarContent.map((item, index) =>
            item !== "Contact" ? (
              <Link
                className="relative flex items-center text-sm space-x-1 px-5 opacity-60 hover:opacity-100"
                key={index}
                to={{
                  pathname: `/some/${item}`,
                  search: `?query=${item}`,
                  hash: `#hash`,
                }}
              >
                {item}
              </Link>
            ) : (
              <button
                key={index}
                className="border-white/[0.2] relative border text-sm font-medium px-4 py-2 rounded-full"
              >
                <Link
                  className="relative flex items-center text-sm space-x-1 px-5 opacity-60 hover:opacity-100"
                  to={{
                    pathname: `/some/${item}`,
                    search: `?query=${item}`,
                    hash: `#hash`,
                  }}
                >
                  {item}
                </Link>
                <span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px" />
              </button>
            )
          )}
          <span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-green-500 to-transparent h-px" />
        </ul>
      </div>
      <div className="mr-44 items-center">
        <button className="inline-flex fixed end-20 top-14 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
          <IconMoon />
        </button>
      </div>
    </div>
  );
}

export default Navbar;
Tags:

2

Answers


  1. 0

    You could increase the animation-duration to 7 seconds, and then calculate how much 5 seconds is of 7 seconds in percentages, and then finally apply that into your animation keyframes:

    5 / 7 * 100 = 71.4%

    p {
  animation: flicker 7s infinite alternate;
  font-size: 4rem;
}

@keyframes flicker {
  0%, 71.4% {
    opacity: 1;
    text-shadow: none;
  }
  71.5%, 90%, 92%, 94%, 96%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px #00ffcc,
                 0 0 10px #00ffcc,
                 0 0 20px #00ffcc,
                 0 0 40px #00ffcc,
                 0 0 80px #00ffcc;
  }
  90.1%, 95% {
    opacity: 0.5;
    text-shadow: none;
  }
}
    <p>Hello World</p>
    Login or Signup to reply.
  2. 0

    To add the effect of animation wait/pause for 5s, the easier way is to make your animation 5s longer than the active animation state. This means that rather than animating up to 100% of the keyframe, complete your animation within 16.67% of the keyframe. Now, if you make your animation 6s long, 16.67% of keyframe animation will take 1s to run, and the rest 5s looks like a pause in an animation. For simple example

    @keyframes scaling {
  0%,
  16.67% {
    transform: scale(1);
  }
  8.34% {
    transform: scale(1.1);
  }
}

.scaling {
  animation: scaling 6s infinite linear;
}

    So, in this example, the scaling animation total time is 6s, but the active animation takes only 1s to run as our active animation complete at 16.67% keyframes. Thus when the next cycle of animation runs, it gives the effect of 5 second pause in animation.

    Now, use this idea to convert your flicker animation code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search