Skip to main content

Perguntas com a tag [css-animations]

A tag não tem possui recomendações de uso.

Filtrar por
Ordenado por
Com tags
-2 votos
1 resposta
36 visitas

Animation-Delay não funciona corretamente dentro do Kayframe CSS

Eu quero que meu texto apareça depois de 6 segundos, ja tentei de tudo mas ele aparece na tela desde o inicio da execução, não entendo o por que o animation-delay não funciona. Como resolvo? #i1 { ...
Murilo Silva Amâncio's user avatar
-2 votos
1 resposta
209 visitas

Animação que quando termina permanece na posição final

Enquanto me encontrava a desenvolver um projeto deparei-me com uma dificuldade na qual venho pedir o vosso auxilio. Eu gostava que no meu projeto uma imagem que foi cortada no css permanece-se na ...
Tiago Gomes's user avatar
4 votos
1 resposta
1mil visitas

Como faço, em um gradiente de 3 cores, a cor do meio "ficar maior", se destacar?

Eu queria saber se é possível fazer a segunda cor desse gradiente se expandir e se destacar no meio dessas duas cores em uma animação CSS, e se for como eu faço. body { background: linear-...
arroz_julio's user avatar
0 votos
2 respostas
150 visitas

Como aplicar efeitos diferentes ao mesmo tempo?

Eae pessoal, beleza? tenho dois ícones e cada um deles tem um efeito transform diferente, a minha duvida é: Quando eu passar o mouse sobre o icon1, existe alguma maneira de ser acionado o efeito do ...
José Guilherme Lins's user avatar
-1 votos
1 resposta
144 visitas

Como sobrepor a animação de carregar dentro de uma div?

tudo bem com vocês? Estou criando um formulário onde ao clicar em algum dos botões gostaria que surgisse uma animação de carregar. Porém ao clicar ele sobrepõem a div no qual está inserido o ...
Gabriel Andreoni's user avatar
-1 votos
1 resposta
38 visitas

animação sai do lugar quando eu diminuo o zoom

bom dia, sou um programador iniciante, estava fazendo uma animação em css do sistema solar com divs, o problema é que nem todos os elementos cabem no mesmo espaço quando o zoom está normal então ...
José Carlos's user avatar
1 voto
2 respostas
2mil visitas

Animação Gradiente CSS

Estou tentando fazer uma animação igual ao deste link: https://codepen.io/TheCodeDepository/pen/jKBaoN Acontece que, o código abaixo (o qual eu copiei linha por linha) está com algum problema que não ...
Ricardo Passos's user avatar
0 votos
1 resposta
188 visitas

Preloader infinito

Apliquei um preloader em um site mas ele "não desliga" por assim dizer. $(window).on('load', function () { $('#preloader .inner').fadeOut(); $('#preloader').delay(350).fadeOut('slow'); ...
Lucas Mikó's user avatar
-1 votos
1 resposta
177 visitas

Gostaria de aplicar uma animação em <nav>. Gostaria de fazer com que ele aparecesse ao clicar em .menu_burger, da esquerda para a direita

const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtn.addEventListener('click', () =>{ if(!menuOpen){ menuBtn.classList.add('open'); menuOpen ...
Rodolfo Fernandes's user avatar
3 votos
1 resposta
341 visitas

Retornar elemento a posição inicial em hover css [fechada]

Estou fazendo uma animação em uma logo, onde cada letra vai para um lado e quando eu passar o mouse na div onde ela está, todas as letras devem voltar ao valor inicial, assim formando a logo. Até ai ...
Maurício Krüger's user avatar
2 votos
1 resposta
369 visitas

animação efeito onda em corda SVG

estou fazendo uma animaçnao SVG e para ficar completo, só está faltando a animação da corda .wrapper { background: #364254; width: 100%; height: 100%; } <div class="wrapper"> ...
Yung Silva's user avatar
1 voto
1 resposta
450 visitas

Como criar um slide infinito parecido com o do Instagram?

Estou tentando criar um slide infinito parecido com o da página principal do instagram, utilizando somente CSS3 e o BOOTSTRAP. Estou com as seguintes dificuldades: Criar o efeito correto As imagens ...
user avatar
0 votos
0 respostas
14 visitas

Animação no CSS ativar de X em X tempo [duplicada]

Existe algum parâmetro pra minha animação ativar de x em x tempo? Por exemplo, a cada 7 segundos quero que essa animação ative: <!DOCTYPE html> <html> <head> <style> ...
Lucas de Carvalho's user avatar
0 votos
2 respostas
302 visitas

Como saber percentual da animação no CSS

Procurei e não encontrei uma função ou propriedade do atributo animate (CSS), para acompanhar e controlar o percentual de uma animação CSS. Ou seja, eu quero, dinamicamente, saber em quantos porcento ...
Fernandes's user avatar
  • 145
1 voto
1 resposta
791 visitas

Manter efeito final do Animation css

Estou fazendo uma tela de loading e no final do efeito, o valor de css que deve ser mantido, é o valor que está no 100% do animation, só que quando o efeito termina, ele volta ao css inicial. Como ...
Maurício Krüger's user avatar
1 voto
0 respostas
61 visitas

Problema com Keyframe dentro do @media no wordpress [fechada]

Bom dia Estou encontrando a seguinte dificuldade na edição de um código mobile no css do wordpress, fiz uma animação com o keyframe no desktop com o código abaixo, porém chegou a hora de colocar essa ...
Grafite's user avatar
  • 95
0 votos
1 resposta
50 visitas

Efeito Typing não fica responsivo somente com CSS

Boa tarde galera, Fiz, com uma ajuda de alguns colegas aqui, um efeito Typing na home, mas ele não está se tornando responsivo, não está se adaptando aos mobiles. Estou tentando também colocar de uma ...
Cris Credie's user avatar
1 voto
1 resposta
310 visitas

Versão mobile flip card

Boa tarde, Criei uma versão de uma section para aparecer somente na versão tela pequena, um flip card, mas quando aberto no mobile, a animação não aparece, e fica estático. Alguém conseguiria me dar ...
Cris Credie's user avatar
4 votos
1 resposta
661 visitas

Efeito de radar com CSS

Estou tentando fazer uma animação tipo "radar" em volta de uma imagem usando apenas CSS com @keyframes. Até consegui chegar a um resultado, exceto pelo fato de que não consigo sincronizar as duas "...
Sam's user avatar
  • 80,8mil
0 votos
1 resposta
190 visitas

Preciso fazer uma forma com css e não consigo. E rotation não funciona no IE11

Fala galera, tudo bem com vocês? (Espero e desejo que sim) Estou começando um novo projeto pessoal, e estou apanhando pra caramba com duas questões: 1 - O conjunto de menus é rotativo, enquanto a ...
user134175's user avatar
0 votos
0 respostas
94 visitas

Transformar uma animação scss para que se adeque ao angular animations

Olá, preciso de colocar no meu angular animations a seguinte animação scss: 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { ...
veroneseComS's user avatar
  • 2.819
1 voto
1 resposta
1mil visitas

Efeito CSS: Floating label em Formulário não funciona sem atributo required

Estou usando o efeito floating em um formulário para mover o label quando o usuário clicar no input ou select. O problema é que o recurso só funciona se o atributo required estiver presente. O que é ...
Frederico Moreira's user avatar
5 votos
1 resposta
143 visitas

Existe alguma forma de testar uma animação CSS pelo DevTools?

Tenho essa animação simples feita em CSS, porém estou tendo dificuldades para "debuggar" seu comportamento. Toda hora tenho que ir no código, salvar, e atualizar no browser. Existe alguma forma de ...
hugocsl's user avatar
  • 66,9mil
18 votos
1 resposta
8mil visitas

Como funciona o Cubic-Bezier em Animações com CSS?

Quando vamos fazer uma animação com CSS temos vários parâmetros que podemos usar. Ex: animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-...
hugocsl's user avatar
  • 66,9mil
2 votos
0 respostas
262 visitas

Por que usar translateZ ou translate3D nas animações feitas com CSS? Animações aceleradas por hardware em CSS?

Hoje em dia é bem comum ver mesmo nos sites mais simples efeitos de animação feitos com CSS, tanto com transition quanto com @keyframes e algo que tem me chamado a atenção é que várias dessas ...
hugocsl's user avatar
  • 66,9mil
11 votos
3 respostas
1mil visitas

Com CSS é possível animar o text-decoration?

Recentemente vi essa animação feita com SVG, Mas fiquei me perguntando, será que é possível animar o text-decoration-style: wavy no :hover de forma a conseguir o mesmo resultado? body { ...
hugocsl's user avatar
  • 66,9mil
9 votos
2 respostas
2mil visitas

Como fazer uma Animação em CSS com efeito de arrasto. Colocar blur no movimento

Estou querendo colocar um loader animado em CSS com @keyframes em uma página, mas gostaria de colocar nele um "efeito de arrasto" como se ele desse uma "embaçada" com um rastro de blur seguindo o ...
hugocsl's user avatar
  • 66,9mil
0 votos
1 resposta
107 visitas

Qual seria a estrutura de CSS. Como montar esse modelo de galeria?

Gostaria de saber que estrutura CSS precisa ser aplicada para se ter o aumento de divs com uma boa transição de animação a nível de CSS de altura e largura, o conteúdo interno da div não precisa ...
jack_rs's user avatar
2 votos
1 resposta
4mil visitas

Como mudar a imagem exibida nas versões Desktop e Mobile de um website

Eu precisava que na versão desktop de um website fosse exibida uma imagem e na versão mobile outra imagem. Sendo que no desktop o contador ficaria em cima da imagem (como ele já fica) e no mobile ...
JVEUZEBIO's user avatar
  • 137
1 voto
1 resposta
2mil visitas

Banner animado com HTML5

Boa tarde Pessoal, Recebi um pedido para criar um banner animado em HTML5. criei o banner utilizando o HTML e CSS, e funcionou corretamente. O cliente foi tentar implementar em seu site, que ...
Welker Zigante's user avatar
3 votos
2 respostas
1mil visitas

Animação com imagem em CSS

Estou quebrando a cabeça com uma coisa simples, geralmente eu resolvo esses problemas olhando no google, mas hoje não tive essa sorte. E o seguinte, eu quero criar um fundo com a class "animation ...
Vitor Hugo's user avatar
0 votos
2 respostas
196 visitas

Problema com execução de animação em CSS

Fiz uma animação em CSS, mas parou de funcionar. Aonde esta o erro? HTML/CSS #loading { background-color: #0e5077; height: 100%; width: 100%; position: fixed; z-index: 99; margin-top:...
Clebson's user avatar
  • 517
1 voto
1 resposta
166 visitas

background-image animation com CSS

blz? Eu tenho um "" com Parallax (parallaxie. js) e animação de imagem de fundo com CSS (KeyFrames). Siga o link: https://codepen.Io/Aguinaldo-Aranda/Pen/zLJwrM Acontece que a animação não está 100%...
Quati_Maldito's user avatar
0 votos
2 respostas
993 visitas

Ativar animate.css apenas quando objeto for clicado

Como adicionar o efeito de animação apenas quando o objeto for clicado? Já estou utilizando animações com o animate.css, mas gostaria que o efeito iniciasse apenas quando eu clicar em cima. Como fazer ...
Rafaela Lopes's user avatar
0 votos
1 resposta
352 visitas

evento com scroll javascript

Tenho o código abaixo criando o efeito de fadein e fadeout com a biblioteca animate.css em um evento do scroll, porém quando o evento ocorre aplicando o fadeOut, ele reaparece até que mexa no scroll, ...
Arthur74's user avatar
  • 187
5 votos
2 respostas
4mil visitas

Efeito zoom com CSS

Tenho uma div com uma imagem na qual apliquei um efeito zoom e uma leve rotação! porém essa imagem deve fazer o zoom e a rotação dentro dos limites da DIV sem transbordar e sim ocultar as partes que ...
Arthur74's user avatar
  • 187
2 votos
1 resposta
55 visitas

Sincronizar a animação dos elementos ao inserir no DOM

É possível inserir um elemento animado no DOM de forma sincronizada? ou seja, ao inserir o estado atual é mantido e não resetado como no exemplo abaixo... function add() { let ctn = document....
Felipe Duarte's user avatar
1 voto
1 resposta
62 visitas

Bug de animação no Firefox

Eu criei um svg e fiz uma animaçãozinha de carregamento, no estilo de um loader simples... Essa animação funciona perfeitamente no Chrome, mas no Firefox e no Edge contém alguns problemas na animação. ...
Otavio's user avatar
  • 50
1 voto
1 resposta
14mil visitas

Animação de imagem com efeito pulse e brilho em css

É possível apenas com css fazer uma imagem ficar pulsando e passando um efeito com brilho?
Isa's user avatar
  • 1.125
0 votos
2 respostas
583 visitas

Animação no CSS é executada mas quando volta ao início não repete

A animação slide-in começa no margin-top:0%; width:100%; e termina no margin-top:300px; width:100%; então o que esta animação faz é descer o texto que está escrito. Mas logo depois que desce e ...
João Rocha's user avatar
1 voto
1 resposta
1mil visitas

Mudar input radio checked pelo Jquery

Estou com mais uma duvida aqui no fórum rs. Eu criei um framework pure css, fiz um slider com input radio + label mais não tinha colocado animação (mudar de segundo em segundo entre eles). Mais só q ...
AntonioSantos's user avatar
5 votos
1 resposta
3mil visitas

Efeito de contornar borda de uma div, como se desenhasse "à mão"

Quero fazer um efeito de borda, que no hover de uma div quadrada, a borda é "desenhada", sai da parte superior esquerda da div, preenche até a superior direita, desce fazendo a lateral direita, ...
Tiago P.C's user avatar
  • 1.150
3 votos
2 respostas
2mil visitas

Animação na mudança do display em HTML

Olá meus queridos amigos programadores deste nosso Brasil! Preciso da ajuda dos senhores na seguinte questão: Tenho um botão que quando apertado muda o display de uma div para block. Assim: CSS #...
Dongabi's user avatar
  • 415
1 voto
1 resposta
263 visitas

Animação no elemento superior - ngShow/ngHide

Gostaria de saber se alguém conhece um método para animar o elemento superior, quando usadas as diretivas ngShow/ngHide do AngularJS. Explicando melhor: possuo um elemento encapsulador, e dentro dele ...
Leandro Hermes Neto's user avatar
1 voto
1 resposta
146 visitas

Ambiente / Tecnologia para desenvolvimento aplicações Web em 3D

Atualmente, muitas aplicações web utilizam-se de recursos 3D em suas aplicações. Um local onde encontrei alguns exemplos foi no Chrome Experiments. Um exemplo que instigou minha curiosidade foi esta ...
Duds's user avatar
  • 7.086
0 votos
1 resposta
201 visitas

Animação com Problema no Safari

Há um tempo percebi que no Safari as animações funcionam de uma maneira diferente. Por exemplo, se tivermos um texto dentro de um span e queremos que ao hover as letras desse texto diminuam 1px, ...
Diego Souza's user avatar
  • 16,7mil