Articles of css transitions

¿Por qué la aceleración de hardware en CSS3 ralentiza el rendimiento?

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í? […]

¿Puedo aplicar una transición de CSS a la propiedad de desbordamiento?

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 […]

Soporte de Webkit para transiciones de gradiente

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)); }

Fondo de dos tonos dividido por línea diagonal usando css

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 […]

IE 10 + 11: las transiciones CSS con calc () no funcionan

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 […]

Detecta las transiciones css usando javascript (y sin modernizr)?

¿Cómo detectaría que un navegador admite transiciones css usando javascript (y sin usar modernizr)?

transición css con gradiente lineal

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 […]

Transformación CSS3 que afecta a otros elementos con cromo / safari

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 […]

¿Admite Internet Explorer las transiciones de CSS?

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?

Voltea una tarjeta 3D con CSS

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 { […]