transicion - transition opacity css
La transición de color CSS3 no funciona en Chrome (9)
Los enlaces en el menú de la izquierda en este sitio web tienen una propiedad de transición CSS3 del color , que cambia al pasar el mouse. No funciona en Chrome 16 o 17 (el cambio de color es repentino), mientras que otras transiciones en el sitio web sí. Funciona en Firefox, Opera e incluso Safari, que utiliza un kit de web como Chrome, por lo que no creo que pueda ser un problema con mi CSS. ¿Entonces que?
Aquí está mi CSS de esta parte (el CSS completo está here ):
#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}
#menu a:visited
{
color: gray;
}
#menu a:hover
{
color: black;
}
¡ACTUALIZAR! Al parecer, esto probablemente se ha corregido en 18 beta. Sin embargo, si ha encontrado este problema, visite el informe de error vinculado en la respuesta aceptada a continuación y marque el problema.
. . Pensé que sería bueno notar que esto no es un error, sino un comportamiento intencionado. Citando los documentos del desarrollador de Mozilla :
Impacto en los desarrolladores web
En general, esto no debería afectar demasiado a los desarrolladores web. Sin embargo, existen algunos casos especiales que pueden requerir cambios en los sitios:
(...)
Las transiciones CSS no serán compatibles con los enlaces visitados. Afortunadamente, las transiciones de CSS son muy nuevas, y hay pocos sitios que las usan en este momento, por lo que no es probable que esto afecte a muchas personas en este momento.
@Nijikokun puedo confirmar lo mismo. : los enlaces visitados no hacen la transición correctamente en Chrome. ¡Hurra! Parece que este es un problema que surgió en la versión 16 y nunca se solucionó. Hay algunos informes de errores abiertos en el sitio de Chromium.
Como Darren Kovalchik escribió en su asnwer ( https://.com/a/8524199/1010777 ), el Chrome tiene un error en esto.
Una posible solución es aplicar una animación de color en el elemento principal del enlace y configurar el color del enlace para heredarlo. En este caso, la animación funciona bien incluso si el enlace es: visitado.
html:
<span class="whateverLinkParent">
<a href="#">whateverLinkText</a>
</span>
css:
.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
0%, 100% { color: #686765; }
50% { color: #2E2D2B; }
}
Por supuesto, esta solución no puede funcionar si la configuración del color principal del enlace es un problema, pero en todos los demás casos ofrece una solución fácil y limpia.
Dos de mis enlaces de transición funcionan, pero el resto no está en Chrome. Todos usan el mismo ajuste. Parece que funcionan cuando el enlace es mailto: o callto: - extrañamente extraño si me preguntas.
Esto no es un problema que no funciona, lo que es el: enlace visitado no está en transición, por lo que puede funcionar para usted si no lo ha hecho, pero si lo hizo, no lo hará.
No sé una solución, todavía estoy buscando una ...
Intente usar #ccc y # 000 en lugar de gris y negro.
edición: Me gusta así: http://jsfiddle.net/qtzEj/
Espero que ayude :)
Si elimina el color del comportamiento visitado, debería funcionar como se esperaba. Cuando el color se establece en: comportamiento visitado, incluso: el color de desplazamiento (sin transición) no funciona como se esperaba.
Todavía me encontré con el mismo problema y encontré una solución que funcionó para mí.
Pude solucionarlo usando la pseudo clase :link como esta:
#menu a, #menu a:link {
color: gray;
transition: color 0.5s;
}
#menu a:hover {
color: black;
}
Traté de encontrar una solución alternativa (más detalles en mi blog: http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug )
Parece que si declara transparente un "visitado con color (color, fondo, color de borde, etc.) funcionará como solución alternativa. Todavía no he probado extensivamente, me alegra recibir comentarios.