Las transiciones CSS permiten que los cambios de propiedad en los valores CSS se produzcan sin problemas durante un período especificado.
Estoy tratando de hacer una <ul>diapositiva hacia abajo usando transiciones CSS. El <ul>comienza a las height: 0;. Al pasar el mouse, la altura se establece en height:auto;. Sin embargo, esto hace que simplemente aparezca, no transición, Si lo hago de height: 40px;a height: auto;,...
Actualmente estoy diseñando un menú 'mega desplegable' de CSS, básicamente un menú desplegable regular solo de CSS, pero que contiene diferentes tipos de contenido. Por el momento, parece que las transiciones CSS 3 no se aplican a la propiedad 'display' , es decir, no se puede hacer ningún tipo de...
Parece que no puedo encontrar la sintaxis correcta para la taquigrafía de transición CSS con múltiples propiedades. Esto no hace nada: .element { -webkit-transition: height .5s, opacity .5s .5s; -moz-transition: height .5s, opacity .5s .5s; -ms-transition: height .5s, opacity .5s .5s;...
¿Se pueden usar las transiciones CSS para permitir que un párrafo de texto se desvanezca al cargar la página? Realmente me gusta cómo se veía en http://dotmailapp.com/ y me encantaría usar un efecto similar usando CSS. Desde entonces, el dominio se ha comprado y ya no se menciona el efecto. Se...
Es una pregunta bastante sencilla, pero no puedo encontrar muy buena documentación 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;...
Estoy tratando de hacer la transición al pasar el mouse con css sobre una miniatura para que al pasar el cursor, el gradiente de fondo se desvanezca. La transición no funciona, pero si simplemente lo cambio a un rgba()valor, funciona bien. ¿Los gradientes no son compatibles? Intenté usar una imagen...
¿Es posible usar la animación de transición CSS3 en la carga de la página sin usar Javascript? Esto es algo de lo que quiero, pero en la carga de la página: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html Lo que encontré hasta ahora CSS3 transición-retraso , una forma de retrasar...
¿Hay algún evento activado por un elemento para verificar si una transición css3 ha comenzado o
¿Existe una solución de navegador cruzado para producir una transición deslizante solo con CSS, sin javascript? A continuación se muestra un ejemplo del contenido html: <div> <img id="slide" src="http://.../img.jpg
Entonces, entiendo cómo realizar transiciones CSS3 y animaciones. Lo que no está claro, y he buscado en Google, es cuándo usar cuál. Por ejemplo, si quiero hacer que una pelota rebote, está claro que la animación es el camino a seguir. Podría proporcionar fotogramas clave y el navegador haría los...
Estoy tratando de hacer un efecto de "fundido de entrada y salida" utilizando la transición CSS. Pero no puedo hacer que esto funcione con la imagen de fondo ... El CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */...
Entonces tengo las siguientes transiciones CSS adjuntas al elemento a: a { -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ; -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in; -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;...
.item:hover { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; -webkit-transition: opacity .15s ease-in-out; -moz-transition: opacity .15s ease-in-out; -ms-transition: opacity .15s ease-in-out; -o-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; } ¿Por qué esto...
¿Cuál es la diferencia entre las transiciones CSS3 ease-in,
Me gustaría aplicar una transición CSS a todas las propiedades, excepto a la posición de fondo. Traté de hacerlo de esta manera: .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition:...
En el violín de abajo, tengo una transición de visibilidad y opacidad por separado. El último funciona pero el primero no. Además, en caso de visibilidad, el tiempo de transición se interpreta como un retraso al desplazarse. Ocurre tanto en Chrome como en Firefox. ¿Es esto un...
¿Es posible recibir una notificación (como devolución de llamada) cuando se ha completado una transición de
Estoy tratando de implementar el efecto de "desvanecimiento" en CSS puro. Aquí está el violín . Busqué un par de soluciones en línea, sin embargo, después de leer la documentación en línea , estoy tratando de averiguar por qué la animación de diapositivas no funcionaría. ¿Algún...
El evento final de transición de Webkit se llama webkitTransitionEnd, Firefox es transitionEnd, opera es oTransitionEnd. ¿Cuál es una buena forma de abordarlos todos en JS puro? ¿Debería rastrear el navegador? o implementar cada uno por separado? ¿De alguna otra forma que no se me haya...
Tengo una animación CSS para un div que se desliza después de un período de tiempo determinado. Lo que me gustaría es que algunos divs llenen el espacio del div animado que se desliza, que luego empujará esos elementos hacia abajo en la página. Cuando intento esto al principio, el div que se...