New to CSS - Transitions not working

Question

I am throwing together a really quick, really informal website for a school science project. However, the transitions on my list items aren't working when I hover over them. I'd like to apologize in advance for the messy HTML/CSS.

 body { background-color: black; } header { background-color: #4C99FF; height: 10%; float: right; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .nav-button { height: 90%; border: 1px solid white; border-radius: 5px; text-align: center; } #button-one { float: left; } #button-two { float: right; } .button-text { color: white; font-size: 2vw; border: 1px solid white; } .nav-list { list-style-type: none; } .nav-item { display: inline-block; color: white; margin-top: 3%; font-size: 2vw; border: 1px solid white; border-radius: 5px padding: 25px; -webkit-transition: color .5s; -webkit-transition: background-color: .5s; -moz-transition: color .5s; -moz-transition: background-color: .5s; } .nav-item:hover { color: #4C99FF; background-color: white; } #home { float: left; } #cited { float: right; margin-right: 15%; } 

 <div class="container-fluid"> <div class="row"> <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 header"> <!--<div class="col-xs-3 nav-button" id="button-one"> <a href="#"><h1 class="button-text"> Home<span></span> </h1></a> </div> <div class="col-xs-3 nav-button" id="button-two"> <h1 class="button-text"> Cited </h1> --> <ul class="nav-list"> <a href="#"> <li class="nav-item" id="home">Home</li> </a> <a href="#"> <li class="nav-item" id="cited">Cited</li> </a> </ul> </div> </div> </div> 

Could someone help me with this problem? Once again, I am very sorry for the messy code.

Answer 1

Theres a couple of things, first you should not use semi-colons for the style attributes, it should be like this instead:

-webkit-transition: background-color .5s;

You also shouldn't define transitions separately, it should be comma separated like this:

-webkit-transition: color .5s, background-color .5s;

And finally, you should be using the transition style attribute aswell, not just the webkit and moz ones.

transition: color .5s;