0

Andei criando algumas transição em alguns projetos e acabei notando que a transição ocorre quando a página é carregada ou atualizada. Tenho este exemplo em que a transição é para ocorrer apenas quando eu passar o mouse sobre a div, e ele muda a cor com uma transição mais suave, mas a transição é aplicada também quando a página é carregada.

div{
    background-color: red;
    width: 200px;
    height: 200px;
    transition: background-color 2s;
}

div:hover{
    background-color: black;
}
<div></div>

Parece um efeito de opacidade e depois volta a cor normal. Isso ocorre apenas com o Chrome e Opera, pois testei no Firefox, Edge, IE11 e o efeito não acontece no stackoverflow creio que não vai dar para vocês notarem, terão que criar um arquivo html, Mas existe algum meio para parar de acontecer isso? seja em código ou no browser?

6
  • Eu não consigo afirmar ao certo, mas esse parece um comportamento arbritário do Chrome... da uma olhada nessa questão e veja a minha resposta como resolveu. Se funcionar para vc. pt.stackoverflow.com/questions/383494/… inclusive tb te indico resetar a máquina, pois talvez isso possa ser questão de hardware e gerenciamento de memória ou sei lá. Vale testar... aqui eu testei com o seu código hoje e não tive problemas funcionou normal como o esperado, só ativa o transitio no :hover e não no refresh
    – hugocsl
    23/05/2019 às 16:00
  • Não, funcionou deve ser normal do chrome e opera acontecer isso, Mas isso afeta os projetos que nós criamos, não deveria ocorrer isso. 24/05/2019 às 22:26
  • Eu só notei isso depois da última atualização do Chrome. Porém atualmente não acontece mais comigo, na época resolvi com a resposta que dei na pergunta do link que comentei acima
    – hugocsl
    24/05/2019 às 22:32
  • Era para ser um sim lá em cima escrevi errado. Eu testei o código e a animação acontece antes do hover, era bem isso mesmo parecido com o meu problema e testei aqui o problema foi solucionado mas porque isso ocorre é um bug mesmo ou não? 24/05/2019 às 22:55
  • 1
    Há mais ok, o importante é que você me ajudou e solucionou o problema obrigado hugocsi 24/05/2019 às 23:23

2 Respostas 2

-1

Para funcionar em nos navegadores citados.

div{
    background-color: red;
    width: 200px;
    height: 200px;
    webkit-transition: background-color 2s; /* Para Google 
    Chrome anterior a 26.0 e para Safari 3.0 ~ 6.0*/
    -moz-transition: background-color 2s; /*Para Mozilla 
     anterior 16.0 */
     -o-transition: background-color 2s; /* Para Opera 
     anterior 12.1 */
    transition: background-color 2s;
}

div:hover{
    background-color: black;
}
2
  • Tem ANOS que já não é mais preciso colocar prefixo de browser na propriedade transition prntscr.com/nsihrp fonte caniuse.com/#search=transition o problema é outro...
    – hugocsl
    23/05/2019 às 19:27
  • A propriedade "transition" já é suportada pela verão mais recente do Chrome e Opera, não é necessário utilizar prefixo. A transição ocorre mas antes dela ocorrer acontece um efeito de opacidade que não era para acontecer. 24/05/2019 às 22:31
-1

Por existirem muitos navegadores, e cada um com sua especificação, é necessário adicionar esses prefixos para que um estilo CSS funcione em todos. Assim temos que:

-webkit-

(Chrome, Safari, versões mais recentes do Opera.)

-moz-

(Firefox)

-o-

(Versões antigas do Opera)

-ms-

(Internet Explorer)

Link de Referência da Mozilla

1
  • Valeu colega, Mas não é esse o problema a propriedade "transition" funciona em todos os navegadores o problema é que quando a página é atualizada o browser adiciona opacidade automaticamente e depois volta ao estado normal. 24/05/2019 às 22:34

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .