Perguntas com a tag [css-animations]
A tag css-animations não tem possui recomendações de uso.
46 perguntas
-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 {
...
-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 ...
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-...
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 ...
-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 ...
-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 ...
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
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');
...
-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 ...
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 ...
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">
...
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 ...
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
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 ...
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 ...
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 ...
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 ...
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 ...
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 "...
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 ...
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% {
...
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
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 ...
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-...
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 ...
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 {
...
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 ...
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 ...
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 ...
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
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 ...
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:...
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%...
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 ...
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, ...
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 ...
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....
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. ...
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?
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 ...
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 ...
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, ...
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
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 ...
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 ...
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, ...