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

4
Mantendo o estado final no final de uma animação CSS3
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 Chrome). Meu pensamento natural seria que …
10
Como fazer texto piscando / piscando com CSS 3
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); -webkit-animation-duration: 1.7s; } Ele pisca, mas apenas pisca em "uma direção". Quero dizer, ele apenas desaparece e, em seguida, aparece …
11
animação de transição css3 em carga?
É 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 …
8
Parando uma animação CSS3 no último quadro
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%) , …
8
Animação de rotação CSS3
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; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; …
9
CSS: Animação vs. Transição
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 …
9
Imitando uma tag de piscamento com animações CSS3
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 …
30
Texto embaçado após o uso da transformação CSS: scale (); no Chrome
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); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } …
5
Reproduza várias animações CSS ao mesmo tempo
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%; left: …
4
A propriedade CSS Animation permanece após a animação
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 …
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.