我怎样才能动画无限使用CSS3我的形象 [英] How can I animate my image infinitely using CSS3

问题描述

我有了这些风格的图片：

I have an image that has these styles:

<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度，就像一个硬币。我想作虽然是在页面加载时，图像会做这个动画（旋转）无限，而不需要将鼠标悬停在我的鼠标。我怎样才能使这项工作？

So when I hover over the image it rotates 360 degrees, like a coin. What I would like to make though is when the page loads, the image will do this animation (the rotation) infinitely, without need to hover over my mouse. How I can make this work?

推荐答案

您可以使用关键帧动画这一点。写这样的：

You can use keyframe animation for this. Write like this:

.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/

这篇关于我怎样才能动画无限使用CSS3我的形象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！