html div旋转45度,CSS动画 - 在每次悬停时进一步旋转45度

我想要一个可以旋转45度的元素，当站点显示时(工作正常)，但是我还希望元素每次旋转45度被盘旋。元素，不应该在任何时候恢复。我如何实现使用CSS动画？CSS动画 - 在每次悬停时进一步旋转45度

我创建了一个fiddle，这使得第一个动画，但我不能让它每旋转45度旋转多一次。

我的HTML：

我的CSS：

.image {

position: absolute;

top: 50%;

left: 50%;

width: 120px;

height: 120px;

margin:-60px 0 0 -60px;

-webkit-animation:spin 0.6s linear;

-moz-animation:spin 0.6s linear;

animation:spin 0.6s linear;

animation-fill-mode: forwards;

}

@-moz-keyframes spin { 100% { -moz-transform: rotate(45deg); } }

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(45deg); } }

@keyframes spin { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }