Preguntas etiquetadas con css-transitions

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;, entonces se deslizará hacia arriba height: …

2136 css  css-transitions 

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 …

1449 css  css-transitions 

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; transition: height .5s, opacity .5s .5s; height: 0; opacity: …

519 css  webkit  css-transitions  shorthand 

¿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. …

442 css  css-transitions  opacity 

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; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color …

327 animation  css  css-transitions 

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 …

215 css  gradient  css-transitions 

¿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 los efectos en los elementos. Solo …

195 css  webkit  css-transitions  css-animations 

¿Hay algún evento activado por un elemento para verificar si una transición css3 ha comenzado o finalizado?

190 javascript  events  css  transition  css-transitions 

¿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 /> </div>

177 css  css-transitions 

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 …

155 css  css-transitions  css-animations 

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 */ -webkit-transition: background 1s; …

121 css  background  background-image  css-transitions 

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; transition:color 0.1s ease-in, background-color 0.1s ease-in; } ¿Hay alguna forma de deshabilitar estas transiciones heredadas en elementos específicos a? …

117 css  transitions  css-transitions 

.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 solo anima la opacidad cuando me desplazo pero no cuando dejo el objeto con el mouse? Demostración aquí: …

115 css  css-transitions 

¿Cuál es la diferencia entre las transiciones CSS3 ease-in, ease-outetc.?

112 css  css-transitions 

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: all 0.3s ease; } .csstransitions a { -webkit-transition: …

108 css  css-transitions