如何围绕自己的轴连续旋转图像360度？

Question

如果在没有鼠标悬停的情况下加载页面，如何连续使图像旋转？

这就是我的尝试：

我的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);
}   

我的HTML：

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