CSS transition only works when Dev Tools are open

Question

I have this pretty simple transition to uppercase in css that only works when I open dev tools (only in Mozilla, it doesn't work in Chrome at all). This is my first time working with animations in CSS, so I will take kindly to any comments on my code.

Can the animation be affected by the change in the window height when I open the Dev Tools? Or is it just some magic in the background that changes the behaviour of the page?

CSS:

.headerHeading{
    color: blue;
    background-color: inherit;
}
nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: #27009c;
    border: 1px #180062;
}


.nav-selections > a{

    text-transform: uppercase;
    letter-spacing: 5px;
    /*font: 18px "lato", sans-serif;*/
    /*display: inline-block;*/
    text-decoration: none;
    color: white;
    padding: 18px;
    float: right;
    /*margin-left: 50px;*/
    transition: 1.5s;
}

.nav-selections>.changeColorAnim:hover {
    transition: 1.2s;
    color: rgba(77,77,77,0.97);
}

ul {
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-flow: row nowrap;
    /*background-color: #B79b58;*/
    /*overflow: auto;*/
}

li {
    flex: 1;
    list-style: none;
}

HTML:

<link rel="stylesheet" href="styles/header.css">

<nav>
<ul>
    <li class="nav-selections"><a href="index.php" class="changeColorAnim">Home</a></li>
    <li class="nav-selections"><a href="pages/schedule.html" class="changeColorAnim">Program</a></li>
    <li class="nav-selections"><a href="pages/contact.html" class="changeColorAnim">Contact Us</a></li>
    <li class="nav-selections"> <a><?php
        if ($username != ""){
            echo $username;
        }else{
            echo "nepřihlášený";
        }
        ?>
            </a>
    </li>
    <li class="nav-selections"><a href="pages/login.php" class="changeColorAnim">Přihlásit/Registrace</a></li>
</ul>

Actual and expected behaviour

Answer 1

I think you are missing the animation.

Add below animation along with animation: add-padding 0.5s ease 1 forwards; on .nav-selections > a style.

@keyframes add-padding{
  0%{
      padding:0;
  }
  100%{
    padding:18px;
  }
}

See the Snippet below:

.headerHeading{
    color: blue;
    background-color: inherit;
}
nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: #27009c;
    border: 1px #180062;
}


.nav-selections > a{

    text-transform: uppercase;
    letter-spacing: 5px;
    /*font: 18px "lato", sans-serif;*/
    /*display: inline-block;*/
    text-decoration: none;
    color: white;
    float: right;
    /*margin-left: 50px;*/
     animation: add-padding 0.5s ease 1 forwards;
    transition: 1.5s;
}
@keyframes add-padding{
  0%{
      padding:0;
  }
  100%{
    padding:18px;
  }
}
.nav-selections>.changeColorAnim:hover {
    transition: 1.2s;
    color: rgba(77,77,77,0.97);
}

ul {
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-flow: row nowrap;
    /*background-color: #B79b58;*/
    /*overflow: auto;*/
}

li {
    flex: 1;
    list-style: none;
}

<link rel="stylesheet" href="styles/header.css">

<nav>
<ul>
    <li class="nav-selections"><a href="index.php" class="changeColorAnim">Home</a></li>
    <li class="nav-selections"><a href="pages/schedule.html" class="changeColorAnim">Program</a></li>
    <li class="nav-selections"><a href="pages/contact.html" class="changeColorAnim">Contact Us</a></li>
    <li class="nav-selections"> <a><?php
        if ($username != ""){
            echo $username;
        }else{
            echo "nepřihlášený";
        }
        ?>
            </a>
    </li>
    <li class="nav-selections"><a href="pages/login.php" class="changeColorAnim">Přihlásit/Registrace</a></li>
</ul>

You can also test it here