Estou executando uma animação em alguns elementos definidos opacity: 0;no CSS. A classe de animação é aplicada no Click e, usando quadros-chave, altera a opacidade de 0para 1(entre outras coisas). Infelizmente, quando a animação termina, os elementos retornam para opacity: 0(no Firefox e no...
Atualmente, eu tenho este código: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
É 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...
Eu tenho uma animação CSS3 de 4 partes sendo reproduzida com um clique - mas a última parte da animação serve para tirá-la da tela. No entanto, ele sempre volta ao seu estado original após ser reproduzido. Alguém sabe como eu posso pará-lo em seu último quadro css (100%) , ou então como me livrar...
Analisei algumas demos e não tenho idéia do por que não consigo fazer o giro do CSS3 funcionar. Estou usando a versão estável mais recente do Chrome. O violino: http://jsfiddle.net/9Ryvs/1/ div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin;...
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...
Eu realmente quero fazer um pedaço de texto piscar no estilo da velha escola sem usar javascript ou decoração de texto. Sem transições, apenas * piscam *, * piscam *, * piscam *! EDIT : Isso é diferente dessa pergunta, porque eu peço piscar sem transições contínuas, enquanto o OP das outras...
Parece que houve uma atualização recente no Google Chrome que causa texto embaçado depois de fazer um transform: scale(). Especificamente, estou fazendo isso: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05);...
Como posso fazer com que duas animações CSS sejam reproduzidas em velocidades diferentes ? A imagem deve girar e crescer ao mesmo tempo. A rotação será alternada a cada 2 segundos. O crescimento terá um ciclo a cada 4 segundos. Código de exemplo: .image { position: absolute; top: 50%;...
Algo tão simples deve ser facilmente realizado, mas estou puxando meu cabelo por causa do quão complicado é. Tudo que eu quero fazer é animar a montagem e desmontagem de um componente React, é isso. Aqui está o que tentei até agora e por que cada solução não funciona: ReactCSSTransitionGroup...
Estou tentando fazer uma animação de reticências e gostaria de saber se isso seria possível com animações CSS ... Então pode ser como Loading... Loading.. Loading. Loading... Loading.. E basicamente continue assim. Alguma ideia? Editar: assim:
Estou tentando fazer com que uma propriedade de animação CSS permaneça após a conclusão, isso é possível? É isso que estou tentando alcançar ... O elemento deve ser ocultado quando o usuário chega à página, após 3 segundos (ou o que for), ele deve aparecer gradualmente e assim que a animação...
Estou tentando criar uma animação no estilo montanha-russa com CSS. Eu quero saber como curvar a "montanha-russa" quando estiver no estágio de loop. Estou procurando por uma solução totalmente CSS, mas se houver necessidade de um pouco de JavaScript, estou bem com isso. meu código até...