CSS Text Animation

For the last few days searching the web. I have been trying to animate the link text in the header menu. I’m using Simple CSS & JS with great luck on a few items but I just can’t seem to have any luck with this one. I used Google Fonts for the style I wanted and wonder if that might be creating a conflict. I tried this code along with a few others but doesn’t work.

.top-navigation ul li a,
#header-right-menu ul li a
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-30px);}
20%, 40%, 60%, 80% {transform: translateX(30px);}
}

I know nothing about CSS so any help would be appreciated.

Curtis
Website; rtwjetskiservice.com