CSS color transition triggers multiple animations when loading the website

Question

This is my first question in this forum so if it's not well explained, feel free to ask me for more details.

I have a color transition in all the links on my navbar, that triggers when you hover your mouse over them. This work wells, the problem is that when the website loads, all those elements began to resize or move to their initial positions.

CSS

nav{
    height: 80px;
    width: 100%;
    background-color: rgba(250,250,250,1);
    font-size: 13px;
    border-bottom: 1px solid #D8D8D8;
    color: #6E6E6E;
    position: fixed;
    margin-top: -80px;
}

nav a{
    padding: 20px 20px;
    line-height: 80px;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;   
}

nav a:hover{
    color:#00BFFF;
}

---

UPDATE

I have tried to make a JSFiddle with the problem, but even when the CSS and HTML is exactly the same its seem to work correctly on the demo

I have changed the transition property from all to color. This has solved the problem partially, since now the elements don't move when the page loads, but the problem now is that all links that include this color transition, when the website loads, show an initial blue color (inexistent in my CSS) taking the transition time to change to the correct color. This initial blue color is similar to the visited links standard color (but I have also used the selector a:visited without positive result.

This only happens on Firefox.

As due to my low reputation I can't post images, I have taken the blue initial tone: RGB (6,6,231)

Answer 1

You only need animate the color:

-webkit-transition: color 0.8s;
transition: color 0.8s;  

note that I change all for color only.

note 2 you can do

transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s; 

Answer 2

Try adding script tag at footer of the html page.This worked for me.

<script> </script>