如何使用CSS3无限制动我的图像

Question

我有一个具有以下样式的图像：

<img src="images/head-tails.gif" class="graphs" />

.graphs {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
    /* -webkit-animation:animated 5s infinite; */
    /* -moz-animation:animated 5s infinite; */
    /* -o-animation:animated 5s infinite; */
    /* animation:animated 5s infinite; */
}
.graphs:hover {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

因此，当我将鼠标悬停在图像上时，它会像硬币一样旋转360度。 我想要做的是当页面加载时，图像将无限地执行此动画（旋转），而不需要将鼠标悬停在我的鼠标上。 我怎么能做这个工作？

Answer 1

您可以使用关键帧动画 。 像这样写：

.graphs {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:2s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -moz-animation-name:orbit;
    -moz-animation-duration:2s;
}
@-webkit-keyframes orbit { 
from { -webkit-transform:rotateY(0deg) } 
to { -webkit-transform:rotateY(360deg) } 
}
@-moz-keyframes orbit { 
from { -moz-transform:rotateY(0deg) } 
to { -moz-transform:rotateY(360deg) } 
}

检查这个http://jsfiddle.net/ktPev/1/

Answer 2

请改用关键帧动画。 取消注释注释代码并将animation-timing-function更改为linear 。 喜欢这个animation: animated 5s linear infinite; 。 然后定义关键帧动画，例如像这样（我在我的例子中使用了-webkit-）：

@-webkit-keyframes animated {
        to { -webkit-transform: rotateY(360deg); }
}

它应该工作！

这是一个演示