jquery - CSSアニメーションを使用してリンクの背景色を変更する

Question

CSS アニメーションを使用してアンカー タグの背景色を変更しようとしています。ユーザーがページのどこにいるかに応じて、特定のリンクで色がフェードインするようにします。これを行うために、色をフェードインするキーフレーム設定を作成し、そのアニメーションを要素に追加するクラスを作成しました。次に、そのクラスをjavascriptを介してアンカータグに追加しますが、それを機能させることができないようです。

ここに私のコードがあります

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");

        }  

    });

});

サイトのスクロール位置に基づいてこのクラスを追加しようとしていますが、何も取得していないようです。スクロールに基づいてクラスが追加および削除されていることを要素インスペクターで確認できますが、アニメーション効果は表示されません。css アニメーション構文がオフになっていると思います。

どんな助けでも大歓迎です、ありがとう