css - CSS3 アニメーションが機能しない

Question

CSS3 を使用して 1 つの div を別の div の周りに回転させようとしていますが、何らかの理由でまったくアニメーション化されません。私はクロムを使用しています。誰でも助けることができますか？

ここにCSSがあります

.container {
    margin: 0 auto;
    position: relative;
}

#center {
    width: 300px;
    height: 300px;
    margin: 225px auto 0;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
}



@-webkit-keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}

@keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}

#small {
    position: absolute;
    width: 75px;
    height: 75px;
    border: 5px solid #ddd;
    border-radius: 100%;
    background: #aaa;
    animation: rot 3s infinite linear;
    -webkit-animation: rot 3s linear infinite;
}

ここにhtmlがあります

<div class="container">
    <div id="center"></div>
    <div id="small"></div>
</div>