Skip to main content

Respostas interessantes marcadas com a tag

19 votos
Aceito

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

TL;DR Os quatro parâmetros definem os dois pontos de controle da Curva de Bézier, P1(x1, y1) e P2(x2, y2), para grau 3. cubic-bezier(x1, y1, x2, y2) A Curva de Bézier A Curva de Bézier é uma forma ...
Woss's user avatar
  • 77,2mil
12 votos

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

Você pode criar outras bolas para serem o "blur" e alterar apenas o animation-delay e o opacity. O código abaixo é igual ao seu, apenas adicionei os elementos .blurN e criei as regras para estes ...
fernandosavio's user avatar
11 votos
Aceito

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

A maneira mais "rápida" de adaptar seu código é acrescentando uma "sombra ao contrário". As cores são um degradê entre a frente e o fundo: 27% {box-shadow:-10px 0 0 #999,-20px 0 0 #777,-30px 0 0 #...
Largato's user avatar
  • 92,9mil
5 votos
Aceito

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

O Firefox possui o animation inspector, nele você pode "debugar" animações, bem como avançar/regredir o estado da mesma para visualizar como seria o seu comportamento na tela. Basta abrir as ...
Renan Gomes's user avatar
  • 19,3mil
4 votos

Problema com @keyframes CSS

Uma alternativa à resposta do Sam, é usar a propriedade CSS word-break com o valor break-all. h3 { position: absolute; font-family: consolas; letter-spacing: 5px; color: transparent; ...
fernandosavio's user avatar
4 votos
Aceito

Problema com @keyframes CSS

É como o @AndersonCarlosWoss comentou. Os espaços estão quebrando o texto em linhas porque o elemento não possui largura suficiente para exibir o restante do texto na mesma linha à medida que a ...
Sam's user avatar
  • 80,8mil
3 votos
Aceito

Animate CSS - Sintaxe correta?

Movimentar o border-image quando ele não é uma imagem acho que não tem jeito. A solução que encontrei foi criar um pseudo com o border-image que você quer e animar ele. O interessante é que ele é ...
Sam's user avatar
  • 80,8mil
3 votos

Como animar um Radial-Gradient ou Linear Gradiente com CSS?

Cheguei em uma solução usando background-size e background-position. A ideia é que vc tenha um background que seja maior que 100% do tamanho do container. Para isso basta vc colocar valores como ...
hugocsl's user avatar
  • 66,9mil
3 votos
Aceito

Como animar um Radial-Gradient ou Linear Gradiente com CSS?

Com o @keyframe você consegue dizer para animação, quando executar tal ação utilizando valores percentuais. Que seria as fases da animação e esse valores é você que define. Seguindo mais ou menos o ...
Jonathan de Toni's user avatar
2 votos
Aceito

css - always define standard rule 'keyframe' when defining keyframe Error

Seu problema é que vc está declarando a animação apenas para o vendor prefix -webkit- que o Chrome entende mais o IE não. Animação funcionando no IE11 Para corrigis basta vc adicionar o mesmo CSS ...
hugocsl's user avatar
  • 66,9mil
2 votos

Animate CSS - Sintaxe correta?

Segue o modelo, deixei comentado onde vc controla a largura das linhas, só não da para colocar uma de cada cor pq o efeito não funciona com repite-linar mas como o linear-gradiente normal. OBS: não ...
hugocsl's user avatar
  • 66,9mil
2 votos
Aceito

Como não deixar uma Animação em CSS parar mesmo apos o mouse sair de cima do elemento

Segue um exemplo, conforme pedido... $(function(){ $('#box').on('mouseover', function(){ var mv = $(this); mv.addClass('box'); setTimeout(function(){ mv.removeClass('box')...
DiegoSantos's user avatar
1 voto
Aceito

como fazer uma barra de progresso que vá de 0 a 70 e não volte do inicio?

O que faz com que repita é o animation-iteration-count que ficou a infinite: animation: site 5s infinite ease-in-out; /* ^---- este */ Esse indica quantas vezes a animação ...
Isac's user avatar
  • 25,5mil
1 voto
Aceito

@Keyframes, atributo 'animation-delay' não funciona dentro de um 'from' ou 'to'

Cara sua animação tinha alguns problemas, primeiro que na tag P tinha uma transição desnecessária, depois que os parâmetros do "animation" estavam meio errados. E o seu texto tinha um left:300 antes ...
hugocsl's user avatar
  • 66,9mil

Only top scored, non community-wiki answers of a minimum length are eligible