Coding Help -Animating an Image from Left to Right

I am terrible at coding. I've created a code that works on JSFiddle but not on spacehey and I am very confused. I know there are code snippets I can steal from user momoapples but I would like to understand what is going wrong here. The code is meant to have a bird gif fly from left to right at the top. 

Here is the code:

HTML

<img class ='test2' src='https://i.postimg.cc/J7sBF22p/giphy.gif'/>

CSS

.test2 {

  position: fixed;

  left: -14%;

  z-index: 99;

  user-select: none;

  transform: scaleX(-1);

  animation-name: bird-fly;

  animation-duration: 10s;

  animation-timing-function: linear;

  animation-iteration-count: infinite;

  animation-play-state: running;

  width: 75px;

  height: 75px;

}

@keyframes bird-fly {

  0%{ left: -14%; }

  100% { left: 114%; }

}