用css连续翻转元素而不采取行动

Question

我想在y轴上将连续从0转到360度，css 不带动作（按钮，悬停）。

某些脚本通过添加类来允许一次，例如：animate.css

其他只需按下按钮（http://desandro.github.io/3dtransforms/docs/card-flip.html）或悬停（http://davidwalsh.name/demo/css-flip.php）

.img:hover {
   transform: rotateY(360deg);
   transition: transform 10s;
}

到目前为止我尝试过的，但它只能工作一次而且只能悬停...

你能帮我拿到代码吗？

Answer 1

使用带有无限的CSS动画。

img {
    -webkit-animation: anim 10s infinite linear;
    animation: anim 10s infinite linear;
}

@-webkit-keyframes anim {
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(360deg);}
}

@keyframes anim {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}

Answer 2

animation-iteration-count: infinite;您正在寻找的属性？

.loopInfinitely { animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; }