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

时间:2014-11-11 14:39:26

标签: css css3 animation

我想在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;
}

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

你能帮我拿到代码吗?

2 个答案:

答案 0 :(得分:8)

使用带有无限的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);}
}

答案 1 :(得分:0)

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

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