Estou tentando fazer a transição ao passar o mouse com css sobre uma miniatura, para que, ao passar o mouse, o gradiente de segundo plano diminua. A transição não está funcionando, mas se eu simplesmente a alterar para um rgba()valor, ela funcionará bem. Gradientes não são suportados? Eu tentei usar uma imagem também, ela também não fará a transição.
Eu sei que é possível, como em outro post, alguém fez isso, mas não consigo descobrir exatamente como. Qualquer ajuda> Aqui estão algumas CSS para trabalhar:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
Respostas:
Os gradientes ainda não suportam transições (embora a especificação atual diga que eles devem suportar transições de gradiente a gradiente por interpolação).
Se você deseja um efeito de desvanecimento com um gradiente de fundo, defina uma opacidade em um elemento de contêiner e faça a transição da opacidade.
(Houve algumas versões do navegador que suportavam transições em gradientes (por exemplo, IE10. Testei transições de gradiente em 2016 no IE e elas pareciam funcionar no momento, mas meu código de teste não funciona mais).
Atualização: outubro de 2018 Transições de gradiente com nova sintaxe sem prefixo [por exemplo, gradiente radial (...)] agora confirmado para funcionar (novamente?) No Microsoft Edge 17.17134. Não sei quando isso foi adicionado. Ainda não está funcionando no Firefox e Chrome / Windows 10 mais recentes.
fonte
Uma solução alternativa é fazer a transição da posição do plano de fundo para dar o efeito de que o gradiente está mudando: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
fonte
Uma solução é usar a posição de segundo plano para imitar a transição do gradiente. Esta solução foi usada no Twitter Bootstrap há alguns meses atrás.
Atualizar
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Aqui está um exemplo rápido:
Estado do link
Estado de foco
fonte
background-size, que você não pode no IE8. caniuse.com/#search=background-size Além disso, é uma boa solução.Para o que vale a pena, aqui está um mix Sass:
Uso:
@include gradientAnimation(red, blue, .6s);Mixin:
Retirado deste post incrível no Medium de Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
fonte
Eu sei que é uma pergunta antiga, mas talvez alguém goste do meu caminho de solução em CSS puro. O gradiente desbota da esquerda para a direita.
fonte
A seguir, uma tag de âncora tem um filho e um neto. O neto tem o gradiente de fundo distante. A criança no plano de fundo próximo é transparente, mas tem o gradiente para a transição. Ao passar o mouse, a opacidade da criança é transferida de 0 para 1, durante um período de 1 segundo.
Aqui está o CSS:
E, este é o HTML:
O acima foi testado apenas na versão mais recente do Chrome. Estas são as imagens anteriores ao passar o mouse, no meio do mouse e totalmente em transição ao passar o mouse:
fonte
A solução parcial para a transição de gradiente é usar a sombra da caixa de inserção - você pode fazer a transição da sombra da caixa ou da cor do plano de fundo - por exemplo, se você criar uma sombra da caixa de inserção da mesma cor que o plano de fundo e usar a transição na cor de plano de fundo, criará ilusão esse plano de fundo está mudando para gradiente radial
fonte
É possível FAKE transições entre gradientes, usando transições na opacidade de alguns gradientes empilhados, conforme descrito em algumas das respostas aqui:
Animação CSS3 com gradientes .
Você também pode fazer a transição da posição, conforme descrito aqui:
Transição de gradiente CSS3 com posição de fundo .
Mais algumas técnicas aqui:
Animação de gradientes CSS3 .
fonte
Foi encontrado um bom truque no codepen que modifica a
opacitypropriedade, mas consegue que desvanece de um gradiente para outro, aproveitando os pseudo-elementos. O que ele faz é definir um:aftermodo que, quando você altera a opacidade do elemento real, o:afterelemento apareça para que pareça ter desaparecido. Achei que seria útil compartilhar.Código original: http://codepen.io/sashtown/pen/DfdHh
fonte
Com base no código css da sua pergunta, tentei o código da seguinte maneira e funciona para mim (execute o trecho de código) e tente você mesmo:
Com base no código css da sua pergunta, tentei o código da seguinte forma e funciona para mim e tente você mesmo:
Isso funciona para você? Mude a cor com base em sua necessidade :)
fonte
Tente usar: antes e: depois (ie9 +)
fonte
Como declarado. No momento, os gradientes não são suportados com transições CSS. Mas você pode contornar isso em alguns casos, definindo uma das cores como transparente, para que a cor de segundo plano de algum outro elemento de quebra brilha, e faça a transição.
fonte
Eu uso isso no trabalho :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
Não esqueça
<element class="ahover"><span>Text</span></a>se você usa um elemento de texto.fonte
Não há problema em publicar outra visualização, pois ainda não existe uma maneira oficial de fazer isso. Escreveu um plugin jQuery leve com o qual você pode definir um gradiente radial de fundo e uma velocidade de transição. Esse uso básico permitirá que ele desapareça, otimizado com requestAnimationFrame (muito suave):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Mantém o plano de fundo original e todas as propriedades intactas. Também possui rastreamento de destaque como uma configuração:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
fonte
Eu queria que uma div aparecesse como uma esfera 3D e fiz a transição através das cores. Descobri que as cores de fundo gradiente ainda não transitam. Coloquei um fundo gradiente radial na frente do elemento (usando o índice z) com um fundo sólido em transição.
então
div.ballpor baixo:então mudou a cor de fundo do
div.balle voila!https://codepen.io/keldon/pen/dzPxZP
fonte