Usé bootstrap. Aquí está mi código, quiero que cuando pase el mouseover sobre un img o a elemento para hacer que la animación funcione también cuando la animación mouseleave detenga.
.progress-bar { animation: pr 2s infinite; } @keyframes pr { 0% { width: 0; color: red; } 10% { background-color: blue; } 20% { background-color: black; } 30% { background-color: yellow; } 40% { background-color: tomato; } 50% { width: 100%; background-color: violet; } 60% { background-color: rgb(184, 145, 145); } 70% { background-color: white; } 80% { background-color: rgb(0, 255, 234); } 100% { width: 0; background-color: red; } } <div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand"> <div class="samsung"> <a href="samsung.html" class="buki"> <div class="frontimage"> <img src="images/samsung.png" height="232px" width="115px" alt=""> </div> <h3>Samsung</h3> </a> </div> <div class="progress"> <div class="progress-bar"></div> </div>Aquí está el código ACTUALIZADO
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes pr { 0% { width: 0; color: red; } 10% { background-color: blue; } 20% { background-color: black; } 30% { background-color: yellow; } 40% { background-color: tomato; } 50% { width: 100%; background-color: violet; } 60% { background-color: rgb(184, 145, 145); } 70% { background-color: white; } 80% { background-color: rgb(0, 255, 234); } 100% { width: 0; background-color: red; } } .hover-box .progress .progress-bar { height: 20px; width: 100%; } .hover-box .content:hover + .progress .progress-bar { background: red; animation: pr 2s infinite; } </style> </head> <body> <div class="hover-box"> <div class="content"> <a href="#!">Hover me</a> </div> <div class="progress"> <div class="progress-bar"></div> </div> </div> </body> </html>Su barra de progreso requiere una altura para ser vista.
ejemplo:
/* do you need the progressbar to be as wide as the picture box ?*/ /* if yes, uncomment below selector & rule */ /* .choosebybrand { display:inline-block; }*/ .choosebybrand:hover ~ .progress .progress-bar { animation: pr 2s infinite; height: 1em; } @keyframes pr { 0% { width: 0; color: red; } 10% { background-color: blue; } 20% { background-color: black; } 30% { background-color: yellow; } 40% { background-color: tomato; } 50% { width: 100%; background-color: violet; } 60% { background-color: rgb(184, 145, 145); } 70% { background-color: white; } 80% { background-color: rgb(0, 255, 234); } 100% { width: 0; background-color: red; } } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand"> <div class="samsung"> <a href="samsung.html" class="buki"> <div class="frontimage"> <img src="https://dummyimage.com/150x100&text=samsung" alt=""> </div> <h3>Samsung</h3> </a> </div> </div> <div class="progress"> <div class="progress-bar"></div> </div>No puede hacer exactamente lo que se requiere en la pregunta usando solo CSS, ya que los elementos ancla e img no son padres de la barra de progreso ni son hermanos. CSS no permite subir y luego bajar de nuevo.
Lo que puede hacer es sentir el desplazamiento sobre un elemento ancestro de los elementos ancla e img, que también es un hermano del elemento de progreso y hacer que la animación avance en la barra de progreso.
.samsung { display: inline-block; } .samsung:hover~.progress .progress-bar { animation: pr 2s infinite; } .progress { width: 100vw; } .progress-bar { height: 2px; width: 100vw; background-color: magenta; /* added so something is seen when no hover */ } @keyframes pr { 0% { width: 0; color: red; } 10% { background-color: blue; } 20% { background-color: black; } 30% { background-color: yellow; } 40% { background-color: tomato; } 50% { width: 100%; background-color: violet; } 60% { background-color: rgb(184, 145, 145); } 70% { background-color: white; } 80% { background-color: rgb(0, 255, 234); } 100% { width: 0; background-color: red; } } <div style="margin-top: 50px" data-aos="fade-in" class="choosebybrand"> <div class="samsung"> <a href="samsung.html" class="buki"> <div class="frontimage"> <img src="images/samsung.png" height="232px" width="115px" alt=""> </div> <h3>Samsung</h3> </a> </div> <div class="progress"> <div class="progress-bar"></div> </div>Nota: el fragmento tenía que agregar una dimensión de altura para que se pudiera ver la barra de progreso.