As transições de CSS permitem que as alterações de propriedade nos valores de CSS ocorram suavemente ao longo de um período especificado.
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:...
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 transição de...
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,...
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...
É 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;...
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...
É 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...
Existem eventos disparados por um elemento para verificar se uma transição do css3 foi iniciada ou
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
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 os quadros...
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...
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;...
.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...
Qual é a diferença entre CSS3 transições ease-in,
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...
No violino abaixo, eu tenho uma transição na visibilidade e opacidade separadamente. O último funciona, mas o primeiro não. Além disso, em caso de visibilidade, o tempo de transição é interpretado como atraso na saída do mouse. Acontece no Chrome e no Firefox. Isso é um
Estou tentando implementar o efeito "fade out" em CSS puro. Aqui está o violino . Eu procurei algumas soluções online, no entanto, depois de ler a documentação online , estou tentando descobrir por que a animação de slide não funcionava. Quaisquer dicas? .dummy-wrap { animation: slideup 2s;...
É possível obter uma notificação (como retorno de chamada) quando uma transição CSS foi
O evento de fim de transição do Webkit é chamado webkitTransitionEnd, Firefox é transactionEnd, opera é oTransitionEnd. Qual é uma boa maneira de lidar com todos eles em JS puro? Devo fazer uma detecção de navegador? ou implementar cada um separadamente? Alguma outra maneira que não me...
Eu codifiquei um script (com a ajuda de um usuário aqui) que me permite expandir uma div selecionada e fazer com que as outras divs se comportem de acordo, esticando igualmente para ajustar o espaço restante (exceto o primeiro cuja largura é fixa). E aqui está uma imagem do que eu quero...