html - サーバーにアップロードすると CSS3 アニメーションが機能しない

Question

以下は、私が取り組んでいる Web サイトの CSS コードの一部です。

テキストボックスは、アニメーション化され、ホバー時に一時停止するテキストです。アニメーションの残りの部分は正常に機能しますが、ホバー部分は機能しません。最初はブラウザの非互換性の問題があると思っていましたが、すべてのブラウザで同じように動作するため、別の問題のようです。どんな助けでも大歓迎です。

/* CSS for textbox */    

.textbox
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

.textbox:hover
{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;    
}

@keyframes myfirst    {
    0% {background:48D1CC; left:0px; top:0px;}
   25% {background:yellow; left:200px; top:0px;}
   50% {background:blue; left:200px; top:200px;}
  100% {background:#DCDCDC; left:0px; top:0px;}
}

@-webkit-keyframes myfirst { /* Safari and Chrome */
    0% {background:#DCDCDC; left:0px; top:0px;}
   25% {background:yellow; left:200px; top:0px;}
   50% {background:blue; left:200px; top:200px;}
  100% {background:#DCDCDC; left:0px; top:0px;}
}