如何使用 CSS3 无限地为我的图像设置动画

Posted 2023-03-06

【中文标题】如何使用 CSS3 无限地为我的图像设置动画

【英文标题】：How can I animate my image infinitely using CSS3

【发布时间】：2012-12-29 09:30:23

【问题描述】：

我有一张具有以下样式的图片：

<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 度。我想做的是当页面加载时，图像将无限地执行此动画（旋转），而无需将鼠标悬停在我的鼠标上。我怎样才能做到这一点？

【参考方案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/

【讨论】：

在你给我的链接中它工作正常，这正是我想要做的，但由于某种原因在 fy 文件中不起作用

好的，我发现了问题并修复了它。谢谢！请再问一个问题.. 如果我有更多具有同一类的图像，我怎样才能使它们以一些延迟时间旋转，以使它们不同步？？？

我认为您需要使用不同的类，然后使用 animation-delay 属性来定义每个动画应该何时开始。下面是我的演示的更新版本 - jsfiddle.net/ccryz/7

@ChristoferVilander 不错，但你可以用更少的代码来实现这一点，检查这个jsfiddle.net/ccryz/8

【参考方案2】：

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

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

它应该可以工作！

这是DEMO