Как сделать так, чтобы анимация воспроизводилась каждые 5 секунд ⇐ CSS

[Anonymous]

Привет, ребята, я пытаюсь создать эффект лампочки, чтобы текст мерцал. но я не хочу, чтобы он мерцал все время, я хочу, чтобы он воспроизводился каждые 5 секунд, а не все время. Я пытался задать задержку, но это дает мне задержку только в начале загрузки веб-сайта. Я использую css, Tailwindcss и 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 (

• {NavbarContent.map((item, index) =>
  item !== "Contact" ? (
  
  {item}
  
  ) : (
  
  
  {item}
  
  
  
  )
  )}

);
}

export default Navbar;


Подробнее здесь: https://stackoverflow.com/questions/793 ... -5-seconds