CSS transition-property does not select font-size inside VScode

May 29, 2022

Font-size is white, as can be seen in the picture below. I’m assuming the transition property doesn’t select font-size because it does not recognize it inside VScode as a selectable property. On an online editor the transition-property: font-size; rule works, so I am wondering is this VScode fault, or am I writing something wrongly. I would very much like for somebody to explain to me what is it that I am doing wrongly, if that’s the case. Thank you!

[css code][1]

[1]: https://i.stack.imgur.com/ftFG4.png*strong text*

Html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="heading">animacija</h1>
</body>
</html>

>Solution :

The font-size in your VS code is looking white because your VS code theme is different.
transition property doesn’t work if you are running it on mozilla firefox or any other browser except chrome. In that case, you need to specify it in your css like below:

body .heading {
    font-size: 20px;   
    color: aqua;
    -webkit-transition: font-size 2s;
       -moz-transition: font-size 2s;
         -o-transition: font-size 2s;
            transition: font-size 2s;
}

.heading:hover {
    font-size: 40px;
    color: green;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="heading">animacija</h1>
</body>
</html>