Respostas interessantes marcadas com a tag

13 votos
Aceito

Efeito deslizante em links 'ancora'

Infelizmente isto não é possível de ser feito usando CSS, para alcançar este efeito pretendido terás que usar Javascript/jQuery. Eis um exemplo abaixo de como podes fazer isto utilizando jQuery, e ...
Chun's user avatar
  • 7.506
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 #...
Square Obama's user avatar
  • 93,3mil
8 votos

Como animar a exibição de elementos de tamanho dinâmico somente com CSS?

Há uns tempos para cá eu criei um artigo sobre este mesmo assunto no meu Blog. Podes fazer isso utilizando o max-height da seguinte maneira: .box { max-height: 0; transition: max-height 2s;} ....
Chun's user avatar
  • 7.506
6 votos
Aceito

Transformar texto para italico on hover!

Não tem como, primeiro porque o único pseudo-elemento que existe para linhas é o ::first-line e ele só vai pegar a primeira linhas, segundo o font-style diferente do font-weight não suporta valores ...
Serial Coding Experiments's user avatar
5 votos
Aceito

Ficar mudando a cor da fonte somente com CSS

É possível sim, basta trocar o color do ícone, pois ela é uma propriedade que pode ser animada sem problemas. Como o FontAwesome é uma fonte vc deve usar o color para isso, e com o @keygrames vc faz a ...
hugocsl's user avatar
  • 66,7mil
4 votos
Aceito

Exibir mensagem e esconder em alguns segundos

Exemplo didático: // Iniciará quando todo o corpo do documento HTML estiver pronto. $().ready(function() { setTimeout(function () { $('#foo').hide(); // "foo" é o id do elemento que seja ...
Daniel Omine's user avatar
  • 20mil
4 votos
Aceito

Transition com tempo diferente ao passar o mouse (hover) e ao retirar

Já tentou definir a propriedade de transition nos dois estados do css, uma com mais e outra com menos tempo? Veja no seu próprio exemplo, ao ativar o hover reduzo o tempo de transição: img{ ...
Diego Rafael Souza's user avatar
4 votos
Aceito

Efeito zoom com CSS

É possível resolver isso usando padding e um pseudo-elemento ::after. Vc tem que tirar a cor de fundo da div imagem e usar o pseudo-elemento como cor de backgroud. Depois faz um ajuste de padding para ...
hugocsl's user avatar
  • 66,7mil
3 votos

Exibir mensagem e esconder em alguns segundos

mostrar uma notificação ao entrar no site e sumir depois de alguns segundos Usando o Exemplo que você mesmo deu : $(document).ready(function(){ // A DIFERENÇA ESTA AQUI, EXECUTA QUANDO O ...
Guilherme Lautert's user avatar
3 votos
Aceito

Como fazer scale de uma div sem alterar os elementos filho?

Pode trocar opacity por rgba nos atributos border, ficando assim: .quadrado{ width: 18.5vw; margin-left: 5vw; height: 18.5vw; overflow: hidden; float: left; display: inline-...
Serial Coding Experiments's user avatar
3 votos
Aceito

Transição de CSS ignorada quando a ordem da array no v-for muda

O problema que havia era que o .sort() estava a mudar a posição dos elemento no v-for e isso fazia com que o Vue pensasse que se tratava de novos elementos. Configurando a posição à esquerda de outra ...
Sergio's user avatar
  • 135mil
3 votos
Aceito

Transição em elementos usando :hover:after

Gradientes não suportam transições ainda (embora a especificação diz que eles deveriam). transição gradiente CSS3 com background-position Embora você não pode animar directamente gradientes ...
Lennon S. Bueno's user avatar
3 votos
Aceito

Minha animação não esta funcionando quando passo o mouse

Cara primeiro, vc tem que por position:relative no container da foto, assim o overlay da sombra que está dentro do container não cobre a tela inteira. Depois, display não é uma propriedade "animável" ...
hugocsl's user avatar
  • 66,7mil
2 votos
Aceito

Quebra de layout com menu superior em navegadores diferentes

Alterei seu código para : <!DOCTYPE html> <html> <head> <title>Introdução</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/...
MagicHat's user avatar
  • 12,5mil
2 votos
Aceito

Rotação de Imagem com CSS

A chamada do css está errada.... <link rel="stylesheet" type="text/css" href="style.css">
Kleber Stumpf's user avatar
2 votos
Aceito

Como faço o transition funcionar na "ida e na volta" ao usar hover?

Ponha a transition no objeto original, e não no :hover: .novidades{ display:block; height:100px; width:200px; /* só pra demonstrar */ background-color: #f5dcdc; position: relative; ...
Square Obama's user avatar
  • 93,3mil
2 votos

Exibir mensagem e esconder em alguns segundos

Não chega a ser necessário Javascript para isto, pode usar somente as animações das CSS visto que você quer exibir a notificação assim que o usuário entrar no site, não quando a página estiver ...
Renan Gomes's user avatar
  • 19,3mil
2 votos

Como animar a exibição de elementos de tamanho dinâmico somente com CSS?

Eu fiz uma experiência utilizando função scaleY do transform junto na transição, o efeito não é o mesmo mas "resolve" a questão do height relativo. De repente pode servir como ponto de partida para ...
Leandro Angelo's user avatar
2 votos

Efeito deslizante em links 'ancora'

Faço usando jQuery var top = $('#contato').offset.top(); $(window).animation({ scrollTop: top, // Separa condições. }, 300);
Diego Souza's user avatar
  • 16,7mil
2 votos
Aceito

Erro delay em transição

Use a transition apenas nos elementos necessários. .service-thumb { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px; }...
Vitor Adriano's user avatar
2 votos
Aceito

Animação com imagem em CSS

Na verdade como vc falou que queria mexer pouco no template é possível sim fazer apenas como uma div Vc consegue o efeito usando apenas uma div e usando a pseudo-class ::after na div Veja o exemplo ...
hugocsl's user avatar
  • 66,7mil
2 votos

Animação com imagem em CSS

Seguindo o raciocínio fornecido pelo Leandro Angelo, seria uma solução, no entanto como eu não quero modificar muito o template para não ter que usar position, vou busca outro jeito, mas caso alguém ...
Vitor Hugo's user avatar
2 votos
Aceito

Como adicionar delay para Display:block

Segue uma alternativa. div { clear: both; } .icon { position: absolute; top: 0px; left: 0px; height: 32px; width: 32px; background-repeat: no-repeat; background-size:...
Tobias Mesquita's user avatar
  • 23,1mil
2 votos
Aceito

Qual a diferença em usar transition: all e transition: [propriedade específica]?

Cara o grande problema ai é a performance. Usar o transition:all consome muito recurso do browser, pois ele vai "tentar" animar todos os estilos da classe, mesmo que eles não tenham animação, isso ...
hugocsl's user avatar
  • 66,7mil
2 votos

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

No seu arquivo CSS você pode utilizar Media Query, que possibilita alterar o comportamento do CSS para resoluções diferentes. Nesse caso o ideal seria ter duas imagens diferentes no seu html. Sendo ...
Roberto F's user avatar
1 voto

Como realizar uma transition de "volta" utilizando o Vue Router?

Tem esse exemplo no próprio repositório que como é possível fazer isso. Você precisa passar a animação dinamicamente atráves de uma propriedade. Para definir qual animação usar e quando usar você pode ...
César Felipe's user avatar
1 voto
Aceito

Como criar a mecânica e aparência do efeito zoom usado no framework reveal.js?

Como tinha te falado esse é um exemplo bem básico, fiz meio na correria, mas acho que vai abrir sua cabeça para ver que só com CSS vc consegue algo bem próximo disso. Com calma e umas linhas a mais de ...
hugocsl's user avatar
  • 66,7mil
1 voto
Aceito

Posicionamento do texto ao usar -webkit-transition

Eu encontrei a solução pesquisando um pouco e a propriedade flex-shrink resolveu meu problema, ele pode desativar a retração do texto ao ter o valor 0 atribuído. Eu fiz a seguinte alteração no meu CSS:...
Marcel's user avatar
  • 576

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