Perguntas com a tag [css-animations]

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

Filtrar por
Ordenado por
Com tags
1 voto
1 resposta
365 visitas

Fazer um elemento pegar a tela inteira usando hover

Estava fazendo um layout no figma, e to passando ele pra html e css, mas eu queria fazer uma animação. Como dar pra ver eu tenho um triangulo rosa, e eu queria que ao passar o mouse sobre ele, ele ...
3 votos
1 resposta
321 visitas

Retornar elemento a posição inicial em hover css

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 ...
-2 votos
1 resposta
27 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 { ...
1 voto
1 resposta
13mil 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?
-2 votos
1 resposta
165 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 ...
4 votos
1 resposta
569 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-...
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 ...
0 votos
2 respostas
102 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 ...
1 voto
1 resposta
414 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 ...
1 voto
0 respostas
25 visitas

Não era para estar se movimentando? [fechada]

O meu objetivo seria fazer como se fosse "ondas" dentro do h2. Eu já tentei fazer de tudo mas não consigo, tentei fazer um @keyframes: @keyframes animate { clip-path: polygon(0 47%, 19% 48%,...
-1 votos
1 resposta
130 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 ...
-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 ...
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-...
1 voto
1 resposta
289 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 ...
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 ...
0 votos
1 resposta
183 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'); ...
-1 votos
1 resposta
145 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 ...
1 voto
1 resposta
61 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. ...
2 votos
1 resposta
327 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"> ...
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, ...
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> ...
0 votos
2 respostas
281 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 ...
1 voto
1 resposta
702 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 ...
1 voto
0 respostas
56 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 ...
0 votos
1 resposta
36 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 ...
4 votos
1 resposta
615 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 "...
0 votos
1 resposta
162 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 ...
0 votos
0 respostas
88 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% { ...
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 ...
11 votos
3 respostas
937 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 { ...
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 é ...
5 votos
1 resposta
129 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 ...
2 votos
0 respostas
209 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 ...
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 ...
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 ...
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 ...
3 votos
2 respostas
902 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 ...
0 votos
2 respostas
173 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:...
1 voto
1 resposta
147 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%...
0 votos
2 respostas
925 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 ...
0 votos
1 resposta
337 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, ...
2 votos
1 resposta
51 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....
0 votos
2 respostas
565 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 ...
1 voto
1 resposta
980 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 ...
0 votos
1 resposta
169 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, ...
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 #...
1 voto
1 resposta
254 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 ...
1 voto
1 resposta
145 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 ...