Change background colour of link using css animations

Question

I am trying to change the background colour of my anchor tag using css animation. I want the colour to fade in on specific links depending on where the user is on the page. To do this i have created a keyframe setup to fade in the colour, and then a class that adds that animation to the elemt. I then add that class the the anchor tag via javascript, but I can't seem to get any of it to work.

here is my code

HTML

<header id="header">
    <div class="container">
        <nav id="example-one">
            <a class="nav" id="home1" href="#home">Welcome</a>
            <a class="nav" id="featuredWork1" href="#featuredWork">Work</a>
            <a class="nav" id="skills1" href="#skills">Skills</a>
            <a class="nav" id="about1" href="#about">About</a>
            <a class="nav" id="contact1" href="#contact">Contact</a>
        </nav>
    </div>
</header>

CSS

@keyframes test{
    0%   {background-color: rgba(254,73,2,0);}
    25%  {background-color: rgba(254,73,2,.25);}
    50%  {background-color: rgba(254,73,2,.5);}
    75%  {background-color: rgba(254,73,2,.75);}
    100% {background-color: rgba(254,73,2,1);}
}

.activeLink {
    -webkit-transition: test .5s;
    transition: test .5s;
}

JavaScript

$( window ).load(function() {


    //Grabs the height value of the header, can use this variable later for css media queieres instead of hardcoding pixel value
    var headerHeight = document.getElementById('header').offsetHeight;

    //Sets top values of sections to later be used in colour change segment



    //Allows for smooth scrolling
    var $root = $('html, body');
    $('a[href*=#]').click(function() {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight +10
        }, 600);
        return false;
    });

    //Change colour of header bar and elements based on which section the user is on
    $(document).scroll(function() {

        var top1 = $('#home').offset().top;
        var top2 = $('#featuredWork').offset().top - headerHeight;
        var top3 = $('#skills').offset().top - headerHeight;
        var top4 = $('#about').offset().top - headerHeight;
        var top5 = $('#contact').offset().top - headerHeight;


        if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            //adds and removes classes for animated line
            $('#home1').addClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {

            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').addClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').addClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').addClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top5) {
            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').addClass("activeLink");

        }  

    });

});

Im trying to add this class based on the scroll position of the site, however i dont seem to be getting anything. I can see in the element inspector that the class is being added and removed based on the scroll, but I dont see any animation effect, im guess my css animation syntax is off.

Any help is greatly appreciated, thanks