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 ...
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 ...
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 #...
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 ...
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;
...
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 ...
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 é ...
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 ...
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 ...
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 ...
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 ...
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')...
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 ...
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 ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
keyframes × 11css3 × 9
css × 5
animação × 3
css-animations × 3
html × 2
html5 × 2
navegador-de-internet × 2
javascript × 1
jquery × 1
css-transições × 1
ui × 1
webkit × 1
dev-tools × 1
grid-layout × 1