You’ve got a double bracket which breaks the CSS. Just remove it

}
} <== this one
.makethelinknice {

It works for me, you were just missing a final curly brace at the end of your keyframes animations style declaration.

I would also like to add that it was really difficult to notice the actual animation running due to the animation durations you set at 120s ( 2 minutes! )

@keyframes lnktscolor {
    0% {
        color: #368588
    }

    50% {
        color: #593688
    }
    100% {
        color: #368588
    }
} /* <====== you missed this curly brace here */

It could be a bug with your browser, I tried it on codepen and it worked too. It may only work in frames, which would be weird, but it is working for me on everything I try. I also tried doing the same with plain HTML, on Google Chrome. It is most likely that your browser is more picky with your unclosed bracket:

@keyframes lnktscolor {

0% {

   color: #368588

}

50% {

   color: #593688

}
100% {

   color: #368588

}

here

It works for me:

HTML:

<div class="TextBodyTW">
    <a class="maket" href="C:UsershomeScaled404Index.html">Projects</a>
    <span>,</span>
    <a class="maket" href="C:UsershomeScaled404Index.html">Art</a>
    <span>,</span>
    <a class="maket" onclick="openabout()">About</a>
</div>

CSS:

.maket {
    animation: lnktscolor 3s infinite;
}

a.maket {
  text-decoration: none;
  cursor: none;
}

a.maket:hover,
a.maket:hover {
  text-decoration: underline;
    cursor: crosshair;
}

@keyframes lnktscolor {
    0% {
        color: #368588
    }

    50% {
        color: #593688
    }
    100% {
        color: #368588
    }
}  /* <====== CHECK THIS BRACKET */

It will Apply to other elements, but not the first one, no matter what I try It will not work, suspect its a missing tag somewhere

.makethelinknice {
  animation: lnktscolor 120s infinite;
  text-decoration: none;
  cursor: crosshair;
}
.makethelinknice:hover {
  text-decoration: underline;
}
.makethenextlinknice {
  animation: lnktscolor 60s infinite;
  text-decoration: none;
  cursor: crosshair;
}
.makethenextlinknice:hover {
  text-decoration: underline;
}
.makethelastlinknice {
  animation: lnktscolor 30s infinite;
  text-decoration: none;
}
.makethelastlinknice:hover {
  text-decoration: underline;
  cursor: crosshair;
}
@keyframes lnktscolor {
    0% {
        color: #368588
    }

    50% {
        color: #593688
    }
    100% {
        color: #368588
    }
}

<div class="TextBodyTW">
            <a class="makethelinknice" href="C:UsershomeScaled404Index.html">Projects</a>
            <span>,</span>
            <a class="makethenextlinknice" href="C:UsershomeScaled404Index.html">Art</a>
            <span>,</span>
            <a class="makethelastlinknice" onclick="openabout()">About</a>
          </div>

The weirdest thing is its working in the StackOverflow code editor, even though it is copy and paste. I feel like its something funky with divs, thoughts?