How do I continously rotate a image 360 degree around is own axis?

Question

How to continously make the image spin once the page loads without mouse hover?

This is what I have tried:

My css:

#container 
{
    position: relative;
    width: 100px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
#card 
{
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 1.0s linear;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -moz-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;
    -o-transform-style: preserve-3d;
    -o-transition: all 1.0s linear;
    transform-style: preserve-3d;
    transition: all 1.0s linear;



    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);*/ 

}
#container:hover #card, #container.hover_effect #card
{
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;*/

    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}   

My HTML:

<div id="container">
    <div id="card">
        <img alt="" src="images/LOGO.gif" />
    </div>
</div>