Need Help With Animation In My - Loading_URL

Here is my code. Now CSS is being a nusence to me. I run my webpage loading url in my web browser and it works just fine. Except IE, becasue the functions I am using only supports. IE10.

But when I go to join my server, the animations which work in my web browser do not work in garrys mod while waiting to join the server.

Can someone releave me of this crap? Any helpers?

You can veiw the loading_url here:

http://www.desolationloadingurl.site40.net/



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LoadingURL</title>

<style type="text/css">

    .bg {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -5000;
    }
    
    .maincontainer {
        z-index: 5000;
    }

@keyframes rotate {

    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    
  }
     to { 
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

    .gear
{
        animation-name:             rotate; 
        animation-duration:        30s; 
        animation-iteration-count:  infinite;
        animation-timing-function: linear;
    }

</style>

</head>
<body>

<div class="maincontainer">Place your content here!</div>

<div align="center" ><img src="Content/Background.jpg" border="0" class="bg" ></div>

<img src="Content/Logo.png" alt="poop" width="607" height="604" class="gear"/>

</body>
</html>




[editline]16th June 2013[/editline]

-Solved-