Animations y Transitions

[mixzplit]

Hola compañeros Foreros, estoy por un caso de Animaciones y Transiciones en CSS que no logro cuadrar.

Estoy usando el Carrusel de Imagenes de Bootstrap, le agregue un estilo FADE al cambiar de una imagen a otra, ademas de las imagenes, se muestra Texto que tiene Animacion, es decir, cuando se muestra una imagen, salen las animacion con ciertas descripciones de lo que es mi Web.


Ahora bien, estas animaciones solo se ejecutan cuando se carga la pagina y quiero que se ejecuten cada vez que la imagen del carrusel cambie. no se si me explico.

el codigo que uso para la animacion es este:

Código CSS:

/*TRANSICION*/
.trans-bottom
{
width:auto;
height:auto;
background:transparent;
position:relative;
animation:carousel-bottom 8s infinite;
-webkit-animation:carousel-bottom 8s; /* Safari and Chrome */
 
}
 
@keyframes carousel-bottom
{
0%   { left:0px; top:300px;}
25%  { left:0px; top:0px;}
50%  { left:0px; top:0px;}
75%  { left:0px; top:0px;}
100% { left:0px; top:0px;}
}
 
@-webkit-keyframes carousel-bottom /* Safari and Chrome */
{
0%   {left:0px; top:300px;}
25%  {left:0px; top:0px;}
50%  {left:0px; top:0px;}
75%  {left:0px; top:0px;}
100% {left:0px; top:0px;}
}
 

Espero puedan ayudarme compañeros, no he conseguido info sobre el tema

Saludos

[pzin]

No sé cómo funcionará Bootstrap. ¿Añade alguna clase o algo al elemento del carrusel que esté activo? Porque con CSS no puedes hacer que una animación empiece después de un click, bueno, si puedes, usando elementos de formulario pero se va al garete la semántica. Entonces lo suyo sería que si con JavaScript se añade una clase al elemento activo, bases las animaciones en esa clase.

Código CSS:

.elemento_activo .trans-bottom {
  // Código
}
 

[mixzplit]

Hola pzin, gacias por responder, el problema que tengo es que no se como y cuando saber cuando una imagen este activa en el Carrusel de Imagenes, entiendo que no sabes como trabaja Bootstrap, pero mi problema tambien es como saber cuando esta activo o no la imagen en el Carrusel.

Espero puedan ayudarme

[pzin]

Inspecciona los elementos con el navegador, si alguien cambia ahí lo verás.