I am struggling with a CSS code that types out text, but it only does so once and I need it to repeat infinitely. Despite adding
animation-iteration-count: infinite;@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.animation::before
.container{
display: inline-block;
}
.typed-out{
overflow: hidden;
border-right: .15em solid #990000;
white-space: nowrap;
animation-iteration-count: infinite;
animation:
typing 5s forwards;
width: 0;
}<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Demo - Bootstrap 5 multilevel dropdown submenu sample</title>
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338253824">[email protected]</a>/dist/css/bootstrap.rtl.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d203d21">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./css/test.css" />
<script src="./js/test.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<style>
</style>
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
<div>
<h2 class="typed-out">This is a Typing Text</h2>
</div>
</div>
</body>
</html>