不需要人工干预，通过css不断翻转元素

Question

我想使用CSS在y轴上将一个元素从0度到360度持续翻转，无需任何操作（按钮、悬停等）。

一些脚本允许添加类来单次实现此效果，例如：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;
}

这是我到目前为止尝试的方法，但它只能在悬停时工作一次...

你能帮我获取代码吗？

- Zoker

---

请提供一个最小的代码示例，展示您目前所完成的工作。 - LcSalazar

你试过谷歌吗？ - Bill

当然，问题中包含的所有链接都来自谷歌。 - Zoker

StackOverflow是一个寻找现有代码特定编程问题解决方案的地方；它不是一个要求给你提供代码的地方。 - TylerH

这就是为什么我包含了我已经尝试过的代码。 - Zoker

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

- Simon Arnold

---

看起来是一个很好的开始，但动画不起作用： http://jsfiddle.net/Zoker/s3ou9v45/ - Zoker

抱歉，我忘记了这个属性。请查看更新版本http://jsfiddle.net/s3ou9v45/1/ 如果您想要一个恒定的动画，请添加“linear”。 - Simon Arnold

谢谢！但是动画在最后放慢，然后经过一小段暂停后重新开始。我能让它更流畅吗？ - Zoker

是的，添加线性，就像这样 http://jsfiddle.net/s3ou9v45/3/ - Simon Arnold

太棒了！只有一个问题：我不想让图像被反向显示。因此，每次翻转时，它只应该显示正面。 - Zoker

Answer 2

你是在寻找 animation-iteration-count: infinite; 这个属性吗？

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

- Marius Cucuruz