Estoy moviendo 6000 elementos div pequeños en un experimento css3 usando una transición de la top: 0 a la top: 145px para probar el rendimiento. El uso de hardware sin aceleración funciona sin problemas en Google Chrome. Si habilito la aceleración de hardware a través de translateZ(0) rendimiento se vuelve horrible. ¿Por qué es así? […]
Estoy tratando de establecer un transition-delay a la propiedad de overflow del body cuando se hace clic en un div al agregar una clase al body siguiente manera: $(“div”).click(function(){ $(“body”).addClass(“no_overflow”); }); div{ background:lime; height:2000px; } .no_overflow{ overflow:hidden; } body{ overflow:auto; transition: overflow 0 2s; } I’m div Sin embargo, esto no parece funcionar (no hay […]
Me pregunto si alguien sabe cuándo webkit apoyará las transiciones de degradados. por ejemplo, el siguiente código no funciona en Chrome 6 (suponiendo que grad-transition sea un enlace): .grad-transition { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black)); -webkit-transition: background-image .5s; } .grad-transition:hover { background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white)); }
Intento crear un fondo usando css, donde un lado es un color sólido y el otro es una textura: los dos están divididos por una línea diagonal. Me gustaría que fuera 2 divisiones separadas, ya que planeo agregar algo de movimiento con jQuery, donde si haces clic a la derecha, el triángulo gris se hace […]
Estoy animando un contenedor al pasar el ratón de derecha a izquierda con transiciones de CSS. Esto funciona bien en todos los navegadores excepto en Internet Explorer. La razón es que estoy usando (y necesito usar) calc () en mi propiedad izquierda CSS. Creé una demostración en vivo aquí: demostración en vivo El CSS se […]
¿Cómo detectaría que un navegador admite transiciones css usando javascript (y sin usar modernizr)?
Estoy tratando de agregar una transición a un botón. El fondo está hecho con css linear-gradient pero no está funcionando. Este es el CSS de mi botón. a.button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@green), color-stop(100%,#a5c956)); -webkit-transition: background 5s linear; } a.button:hover { -webkit-gradient(linear, left top, left bottom, color-stop(0%,@greenhover), color-stop(100%,#89af37)) } Si te estás […]
Tengo un problema donde mis transformaciones css3 están afectando a otros elementos en la página e incluso causando que parpadeen. Vi otra publicación sobre esto, pero no tenían una resolución con el problema. http://scosha.mybigcommerce.com/w107b/ cuando te desplazas sobre la navegación ves una transformación css3 animada. Funciona bien en Firefox sin parpadeo pero con cromo y […]
Las transiciones de CSS son una forma muy clara de animar los cambios en las propiedades de CSS. ¿Alguna versión de Internet Explorer los admite?
Estoy tratando de hacer un efecto de inversión de tarjeta 3D con CSS de esta manera. La diferencia es que quiero usar solo CSS para implementarlo. Aquí está el código que probé: /*** LESS: ***/ .card-container { position: relative; height: 12rem; width: 9rem; perspective: 30rem; .card { position: absolute; width: 100%; height: 100%; div { […]