Estaba tratando de diseñar mi propio sitio web de CV personal. Necesito usar dos archivos CSS en mi archivo HTML. Todo funciona bastante bien, excepto una cosa. Estoy usando este gráfico de barras horizontales para mi página web. Como puede ver, el gráfico tiene un ligero movimiento fluido. Pero el problema es que mi página web también tiene el mismo efecto de transición, por lo que ahora ambos se superponen. Este es el código que da la transición:

 .spotlights>section>.content > .inner { -moz-transform : translateX(0) translateY(0); -webkit-transform : translateX(0) translateY(0); -ms-transform : translateX(0) translateY(0); transform : translateX(0) translateY(0); -moz-transition : opacity 1s ease, -moz-transform 1s ease; -webkit-transition : opacity 1s ease, -webkit-transform 1s ease; -ms-transition : opacity 1s ease, -ms-transform 1s ease; transition : opacity 1s ease, transform 1s ease; opacity : 1; }

Esta es la transición utilizada para cada elemento que está bajo la etiqueta <div> con el nombre de clase inner . Ahora, el código que se muestra a continuación es la transición utilizada para mi gráfico de barras horizontales :

 graph-bar { background-color : #59BAC0; -webkit-transition : all 1s ease-out; -moz-transition : all 1s ease-out; -o-transition : all 1s ease-out; transition : all 1s ease-out; border-radius : 2px; cursor : pointer; margin-bottom : 10px; position : relative; z-index : 9999; display : block; height : 20px; width : 0%; }

Como puede ver, ambos tienen -webkit-transition: , -moz-transition:; , -o-transition: con diferentes valores. Debido a esto, ambos se superponen, por lo que cada vez que agrego este gráfico de barras horizontales a mi sitio web, todo funciona, excepto el movimiento de flujo del gráfico.

¿Qué debo hacer ahora en esta etapa? Por favor, ayúdame :(