CSS inverse Hover animation

Question

I wrote a HTML page with CSS that changes color of the text to red when the user puts their mouse over it and returns to white if the mouse is moved out.

The problem is that the text does a "fade in" animation when the page is loaded because of the transition: 2s color linear; (that I need to change the color to red from white, but at the start it changes from transparent(I think) to white)

Is there a way to make the text show up instantly without the fade-in?

Here's the code and the jsfiddle, but you need to copy and paste the code on your computer and open it with a browser to see the "fade in" (on jsfiddle it appears without the unwanted effect)

Here's the HTML

html,
body {
  background-color: black;
  color: white;
  overflow: hidden;
}

p {
  text-align: center;
  cursor: default;
}

.watermark {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  resize: none;
}

#watermark {
  color: white;
  font-size: 260%;
  transition: 2s color linear;
  -webkit-transition: color 2s linear;
}

#watermark:hover {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s linear;
  color: rgb(255, 17, 69);
}

<!DOCTYPE html>
<html lang="it">

<head>
  <link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
  <div class="watermark">
    <p id="watermark">hover effect</p>
  </div>
</body>

</html>
=

What browser are you seeing the initial fade in effect with? It shouldn't happen, since the text has an initial color of white, it should be transitioning from white to white. I will say you may want to alter your transition on `#watermark:hover` to target the `color` property... — Heretic Monkey, Dec 10 '19 at 20:29
I was unable to reproduce this on my computer. Which browser are you using, and how are you defining your styles? A ` — olgark, Dec 10 '19 at 20:30
Same. I cannot reproduce this issue on my computer. Can you show us what you are seeing? — Sam Sabin, Dec 10 '19 at 20:33
@olgark I'm using an external css file, I encountered this problem while using chrome and opera, it goes fine with firefox though. Here's the [youtube video](https://www.youtube.com/watch?v=A9O3iSUZk84) where I show my problem — GarlvZ, Dec 10 '19 at 22:15

paoiherpoais · Accepted Answer · 2019-12-10T22:28:13.007

It has to do with how CSS files are loaded in Chrome, I'm pretty sure not all browsers experience this issue. One solution is to create a blank script tag to force the browser to thinking it's loading in a file after our CSS. Looks like there's an issue with Chrome (see STackOverflow linke below).

HTML:

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="home.css">
        <script> </script>
    </head>

    <body>
        <div class="watermark">
                <p id="watermark">hover effect</p>
        </div>
    </body>

</html>

EDIT:

Here's a link to a Stack Overflow dicussion that covered this in detail. I read through it and found this simple fix. So editing my answer.

Stop CSS transition from firing on page load

score 0 · Answer 2 · answered Dec 10 '19 at 22:26

0

Your transition declaration should be:

transition: color 2s linear;

answered Dec 10 '19 at 22:26

Rounin

27,134
9
83
108

CSS inverse Hover animation

2 Answers2