Articles of css transições

O Internet Explorer suporta transições CSS?

As transições CSS são uma maneira muito interessante de animar mudanças nas propriedades CSS. Alguma versão do Internet Explorer as suporta?

Unidades em “0s” Transição no Firefox

Por que a transição a seguir não funciona no Firefox sem as unidades? Depois de adicionar as unidades, isso funciona. Parece que os outros principais navegadores são indiferentes às unidades. Tanto quanto eu sei, este é o único exemplo de um tempo de transição de ‘0’, sem unidades, não funcionando no Firefox. Você pode ver […]

Shorthand da transição do CSS com propriedades múltiplas?

Não consigo encontrar a syntax correta para a abreviação de transição do 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: 0; } .element.show { […]

Como ter múltiplas transições CSS em um elemento?

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

Como impedir a mudança de renderização de texto do Webkit durante a transição de CSS

Estou usando transições de CSS para fazer a transição entre estados transformados de CSS (basicamente fazendo a transição da escala de um elemento). Percebo que, quando o elemento está em transição, o restante do texto na página (no Webkit) tende a alterar levemente sua renderização até que a transição seja concluída. Violino: http://jsfiddle.net/russelluresti/UeNFK/ Também notei […]

Por que meu Transform retrocede?

Estou tentando fazer com que meu elemento fique no local (após a transição). No momento, o local traduzido é onde eu quero, mas meu nome volta para a citação. Estou faltando um pedaço de código ou há um pedaço de código que está fazendo esse snap acontecer? .blockquote { font-family: “Open Sans”, Verdana, Arial, sans-serif; […]

o que é mais rápido? Transições CSS3 ou animações jQuery?

Estou trabalhando em um aplicativo HTML5 para iPad e já implementei suporte ontouch para acionar events mais rapidamente e estou usando o jQuery para segmentar os elementos mais facilmente, mas para as animações que estou usando as transições CSS3 O que você acha que é mais rápido? Usando animações jQuery desde que eu já tenha […]

Efeito de focalização: expanda a borda inferior

Estou tentando obter um efeito de transição na borda que a borda expande em foco. 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 { opacity: 1; } CSS IS AWESOME Eu […]

CSS 3 slide da transição à esquerda

Existe uma solução cross-browser para produzir uma transição slide-in apenas com CSS, sem javascript? Abaixo está um exemplo do conteúdo html:

Retorno de chamada na transição de CSS

É possível obter uma notificação (como retorno de chamada) quando uma transição de CSS foi concluída?