Articles of css transitions

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

Efecto de desvanecimiento CSS3

a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url(‘../img/button.png’) no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s; transition: background 300ms ease-in 2s; -webkit-transition-property: background; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 100ms; -moz-transition-property: background; -moz-transition-duration: 300ms; -moz-transition-timing-function: […]

Animación y visualización CSS3 Ninguna

Tengo una Animación CSS 3 para un div que se desliza después de un tiempo determinado. Lo que me gustaría es que unos pocos divs llenen el espacio de la div animada que se desliza, que luego empujará esos elementos hacia abajo en la página. Cuando bash esto en el primer div que se desliza […]

Expande div desde el centro en lugar de solo arriba e izquierda usando CSS

No estoy seguro de si esto es posible, pero pensé que sería genial usar transformaciones CSS para crear un efecto donde un div se expande desde su centro a un alto y ancho predeterminados, en lugar de solo desde la esquina superior izquierda. Por ejemplo, si tengo ( demo ) y (prefijos del vendedor omitidos […]

Cómo evitar el renderizado de texto de Webkit durante la transición de CSS

Estoy usando transiciones CSS para la transición entre estados transformados CSS (básicamente, la transición de la escala de un elemento). Observé que cuando el elemento está en transición, el rest del texto de la página (en Webkit) tiende a alterar ligeramente su renderizado hasta que finaliza la transición. Fiddle: http://jsfiddle.net/russelluresti/UeNFK/ También noté que esto no […]

¿Cómo tener múltiples transiciones de CSS en un elemento?

Es una pregunta bastante sencilla, pero no puedo encontrar una documentación muy buena sobre las propiedades de transición de CSS. Aquí está el fragmento de CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color […]

¿qué es más rápido? ¿Transiciones CSS3 o animaciones jQuery?

Estoy trabajando en una aplicación iPad HTML5 y ya he implementado soporte ontouch para desencadenar eventos más rápido y estoy usando jQuery para dirigir los elementos más fácilmente, pero para las animaciones estoy usando transiciones CSS3 ¿Qué crees que es más rápido? usando animaciones jQuery ya que ya importé la biblioteca o usé transiciones CSS3 […]

Efecto de desplazamiento: expanda el borde inferior

Estoy tratando de obtener un efecto de desplazamiento de transición en el borde que el borde se expande al pasar el mouse. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ”; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { […]

CSS 3 deslizable desde la transición izquierda

¿Hay una solución de navegador cruzado para producir una transición deslizante con CSS solamente, sin javascript? A continuación se muestra un ejemplo del contenido html: