Perguntas com a marcação «css-transitions»

Estou tentando fazer um <ul>slide para baixo usando transições CSS. O <ul>começa em height: 0;. Ao passar o mouse, a altura é definida como height:auto;. No entanto, isso está fazendo com que simplesmente apareça, não faça transição, Se eu fizer isso de height: 40px;para height: auto;, ele deslizará para height: …

2136 css  css-transitions 

No momento, estou criando um menu 'mega dropdown' de CSS - basicamente, um menu suspenso apenas de CSS comum, mas que contém tipos diferentes de conteúdo. No momento, parece que as transições CSS 3 não se aplicam à propriedade 'display' , ou seja, você não pode fazer nenhum tipo de …

1448 css  css-transitions 

Não consigo encontrar a sintaxe correta para a abreviação de transição CSS com várias propriedades. Isso não faz 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: 0; overflow: …

519 css  webkit  css-transitions  shorthand 

As transições CSS podem ser usadas para permitir que um parágrafo de texto desapareça no carregamento da página? Eu realmente gosto da aparência em http://dotmailapp.com/ e adoraria usar um efeito semelhante usando CSS. O domínio já foi adquirido e não tem mais o efeito mencionado. Uma cópia arquivada pode ser …

442 css  css-transitions  opacity 

É uma pergunta bastante direta, mas não consigo encontrar uma documentação muito boa sobre as propriedades de transição CSS. Aqui está o trecho 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 …

327 animation  css  css-transitions 

Estou tentando fazer a transição ao passar o mouse com css sobre uma miniatura, para que, ao passar o mouse, o gradiente de segundo plano diminua. A transição não está funcionando, mas se eu simplesmente a alterar para um rgba()valor, ela funcionará bem. Gradientes não são suportados? Eu tentei usar …

215 css  gradient  css-transitions 

É possível usar animação de transição CSS3 no carregamento da página sem usar Javascript? É o que eu quero, mas no carregamento da página: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html O que eu encontrei até agora Atraso na transição CSS3 , uma maneira de atrasar os efeitos nos elementos. Funciona apenas em foco. O quadro-chave …

195 css  webkit  css-transitions  css-animations 

Existem eventos disparados por um elemento para verificar se uma transição do css3 foi iniciada ou finalizada?

190 javascript  events  css  transition  css-transitions 

Existe uma solução entre navegadores para produzir uma transição deslizante apenas com CSS, sem javascript? Abaixo está um exemplo do conteúdo html: <div> <img id="slide" src="http://.../img.jpg /> </div>

177 css  css-transitions 

Então, eu entendo como executar transições e animações CSS3. O que não está claro, e eu pesquisei no Google, é quando usar qual. Por exemplo, se eu quiser fazer uma bola quicar, é claro que a animação é o caminho a percorrer. Eu poderia fornecer quadros-chave e o navegador faria …

155 css  css-transitions  css-animations 

Estou tentando fazer um efeito "fade-in fade-out" usando a transição CSS. Mas não consigo fazer isso funcionar com a imagem de fundo ... O CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; …

121 css  background  background-image  css-transitions 

Portanto, tenho as seguintes transições css anexadas ao 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; } Existe uma maneira de desativar essas transições herdadas em elementos específicos? a.tags …

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 que isso apenas anima a opacidade quando passo o mouse, mas não quando deixo o objeto com o mouse? Demonstração …

115 css  css-transitions 

Qual é a diferença entre CSS3 transições ease-in, ease-outetc.?

113 css  css-transitions 

Eu gostaria de aplicar uma transição CSS a todas as propriedades, exceto a posição de fundo. Tentei fazer assim: .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: background-position 0s ease …

108 css  css-transitions