14
votos
Aceito
Animação CSS não funciona no Mozilla
O seu problema é um bug do Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1036761 - O problema é que o Firefox não consegue animar a propriedade CSS background adequadamente.
Assim sendo, ...
- 64,5mil
14
votos
Aceito
Como fazer um elemento cruzar a tela de forma contínua e sempre visível?
Uma forma de fazer é colocar como after um elemento igual distanciado à direita pelo tamanho inteiro da tela com left: 100vw. Assim quando o elemento começar a sumir pela esquerda o distanciado à ...
- 25,4mil
13
votos
Aceito
Como faço para que ao pressionar a tecla uma ação ocorra até eu soltar a tecla, tal qual os jogos de video game?
Na verdade o código apresenta dois problemas imediatos:
A manipulação dos eventos de teclado da forma que é feita não é a mais eficiente para se obter o efeito desejado. Funciona bem para aplicações ...
- 18,4mil
12
votos
Aceito
O que é e como usar o ListViewAnimations?
O que é?
O ListViewAnimations é uma biblioteca de código livre para Android que permite que você adicione animações em itens do ListView facilmente, como pode ser visto no exemplo:
Exemplo de uso da ...
- 21,3mil
10
votos
Aceito
CSS ou JQuery para animação
CSS3 é sempre mais leve.
No entanto você pode enfrentar situações mais complexas onde uma simples estrutura de animation ou transition não será tão útil.
Na maioria dos casos é possível intercalar o ...
- 7.038
8
votos
Como animar a exibição de elementos de tamanho dinâmico somente com CSS?
Há uns tempos para cá eu criei um artigo sobre este mesmo assunto no meu Blog.
Podes fazer isso utilizando o max-height da seguinte maneira:
.box { max-height: 0; transition: max-height 2s;}
....
- 7.496
7
votos
Aceito
Como fazer animações dinâmicas com CSS3?
Apenas complementando o que já encontrou ai para a galera que não conhece ainda.
Animações em CSS3 podem ser criadas usando a propriedade @keyframes, que a propósito é uma propriedade muito poderosa.
...
- 1.921
7
votos
Suavizar animação de elemento tipo balançar via CSS transform
Utilizando @keyframes junto com a propriedade animation para ter controle sobre a animação.
Keyframes na MDN
Animações na MDN
Para esse caso, somente com CSS, uma possível solução seria:
@-...
- 19,2mil
7
votos
Aceito
Como fazer uma animação substituindo imagens
Você pode usar API Canvas para alterar as imagens dando a impressão de movimento,construir mapas, e usar todos os recursos do javascript/html5 para dar interatividade a suas imagens
Veja esse exemplo,...
- 1.730
7
votos
Aceito
criação de gif no r
Há diversas maneiras de produzir um gif no R. Se quiser fazer a transformação das imagens em gif direto no seu computador, você vai precisar de imageMagick.
Mostro aqui um exemplo utilizando o pacote ...
- 3.755
7
votos
Como fazer um elemento cruzar a tela de forma contínua e sempre visível?
Tb é possível usando um linear-gradiente e mudando o background-position
#slider{
position: absolute;
top: 50px;
right: 0;
background: red;
width: 100%;
height: 50px;
...
- 66,5mil
6
votos
CSS ou JQuery para animação
O mais leve é uma animação utilizando apenas CSS, porém em alguns casos é necessário utilizar Javascript para controlar o comportamento da Animação e isto acrescenta um custo adicional na execução da ...
- 23,1mil
6
votos
Aceito
Como fazer uma animação CSS parar no último estado?
Existe uma propriedade experimental chamada animation-fill-mode que define "como uma animação CSS deve aplicar os estilos ao alvo antes e depois de sua execução". O valor forwards determina que o ...
- 65,9mil
6
votos
Como girar o personagem conforme o movimento do mouse?
Acho que sei o problema, em:
void Awake()
{
//Atribuir a mascara da camada
floorMask = LayerMask.GetMask ("floor");
//Atribuir as referencias
anim = GetComponent <Animator> ();
...
- 673
6
votos
Aceito
Suavizar animação de elemento tipo balançar via CSS transform
Uma sugestão é confiar essa animação no CSS, via transition do transform: rotate().
Acho que o jQuery pode ser simplificado para:
var ang = -5;
var el = document.querySelector('img');
setInterval(...
- 135mil
6
votos
Aceito
Como colocar uma GIF animada em um APP no Android?
Você pode usar a lib Glide para isso
segue o exemplo:
no Gradle adicione
dependencies {
compile 'com.github.bumptech.glide:glide:3.5.2'
}
exemplo em sua Activity
Glide.with(context)
.load("...
6
votos
Como colocar uma GIF animada em um APP no Android?
O android nativamente não tem recurso para .gif animado.
Para você fazer este efeito teremos que ter todas as imagens da animação disponíveis para serem adicionadas em um xml.
Então crie um xml ...
- 2.710
6
votos
Como criar transições personalizadas no Android Studio?
Para criar animações customizadas entre transições de telas na aplicação, pode-se usar o método overridePendingTransition() da sua classe pública Activity. Sua sintaxe é:
public void ...
- 27,5mil
6
votos
Aceito
Como fazer com CSS barra de loader com fundo animado?
Não achei um fundo que ficasse melhor, mas ideia é essa:
Usar um background animando a posição com keyframes:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
...
- 2.163
5
votos
Aceito
Como fazer uma animação suave na ProgressBar?
Primeiro uma pequena explicação para entendermos porque é que isso acontece. Sabendo o porquê a solução é simples.
A animação consiste em variar a posição do ProgressBar, partindo da posição máxima ...
- 44,6mil
5
votos
Como fazer animação com SVG ou CSS de um Texto andando pelo caminho?
Encontrei uma solução e vou tentar explica-la em partes para facilitar.
Meu primeiro erro é com a estrutura do SVG, para esse tipo de animação eu não preciso colocar o <path> dentro do <defs&...
- 66,5mil
5
votos
Animation com CSS
Sim, em um exemplo mais prático, basta vc deixar a duração da animação com o dobro do valor que vc precisa, tipo 4 segundos de animação, sendo que só nos 2 primeiros segundo a animação acontece, e nos ...
- 66,5mil
5
votos
Aceito
Gráfico com animação em R
Se você colocar o código para produzir a imagem dentro da função saveGIF() funciona:
lam <- seq(1e-3, 1000, length.out = 100)
animation::saveGIF(
{
for(i in 1:length(lam)){
plot(x, y, ...
- 3.755
4
votos
Suavizar animação de elemento tipo balançar via CSS transform
Esquecendo um pouco a parte de código, vamos pensar no seguinte:
Quando um objeto arredondado apoiado no chão gira, ele também se move para o lado correspondente ao giro.
Além disso, a sombra não ...
- 93,8mil
4
votos
Aceito
Animação CSS3 não executar quando carregar a página
Resolvi o problema utilizando transition no em vez de animation.
body{margin:0; padding:0; font-family: Verdana, Arial, sans-serif;}
aside{
width: 200px;
background-color:#F0F0F0;
}
...
- 11,7mil
4
votos
Aceito
Como usar .toggle() para trocar animações
Isso acontece porque estás a adicionar 250px positivos no segundo .animate() que faz a alternação da animação, enquanto deverias fazer a animação voltar novamente para left:'0' em vez disso, que é o ...
- 7.496
4
votos
Aceito
Repetir animação em css
Atualmente o CSS animation não possui a propriedade delay após o fim da animação, a propriedade existe apenas ao iniciar a animação.
Entretanto, fazendo alguns cálculos simples, é possível fazer a ...
- 8.845
4
votos
Como fazer uma animação numa chamada de ancora?
Esta resposta ficou tão interessante, visualmente, que irei apenas traduzi-lá.
Você pode fazer isso usando apenas CSS, como sugerido pelo @Bacco.
Para isso, você deverá usar o :target, que tem a ...
- 21,8mil
4
votos
Aceito
Animação na mudança do display em HTML
Acho que isso pode te ajudar um pouco:
function obj(x) {
return document.getElementById(x);
}
function ApertarBotao() {
obj("form-pergunta").style.display = "...
- 2.935
4
votos
Aceito
Como funciona cada valor que pode ser usado no atributo "transition" (transition-timing-function) do CSS?
Transition timing function
O transition-timing-function define a forma como uma transformação é aplicada ao longo do tempo. Se é aplicada de forma constante ou mais rápido/devagar em determinada ...
- 25,4mil
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
animação × 166css × 58
javascript × 50
jquery × 29
android × 28
html × 27
css3 × 25
html5 × 13
java × 7
svg × 5
c++ × 4
unity3d × 4
canvas × 4
css-hover × 4
css-animations × 4
css-transições × 4
c# × 3
funções × 3
android-layout × 3
keyframes × 3
transição × 3
php × 2
r × 2
angular × 2
wordpress × 2