I recently implemented a transition to uppercase in CSS, but it seems to only work when I open dev tools in Mozilla and not at all in Chrome. This is my first attempt at using animations in CSS, so any feedback on my code is appreciated.
I'm curious if the animation could be influenced by changes in window height when I open Dev Tools, or if there's some hidden magic at play that alters the page's behavior?
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 behavior