Javascript HTML5-非常简单的动画

我需要了解如何在HTML5或CSS3中创建一个简单的动画

假设你有这个精灵（见图），你需要创建一个4帧的动画。动画必须持续1秒钟。我不想要帧之间的平滑动画，我想要它在没有插值的情况下从一种状态跳到另一种状态。以下是球的4帧：

                  X        Y      ROTATION       OPACITY (%)
First frame:     100      220        10            5
Second frame:    150      240        18            25
Third frame:     160      280        32            55
Fourth frame:    170      290        47            78

在“恢复”中，每0.25秒球必须采用其中一个关键帧。动画上没有循环

你们能举个例子说明如何使用CSS或HTML5/Javascript做到这一点吗？（产生CPU密集度较低的方法）。谢谢

---

这可以通过纯CSS3使用和完成

下面是一个示例（使用

-webkit-

供应商前缀，使用

-moz-

，

-o-

，

-ms-

以获得最佳兼容性）： 该示例仅适用于Chrome和Safari，因为我没有为紧凑示例添加其他前缀。

HTML（例如，设置

元素的动画）：

---

这可以通过纯CSS3实现，使用和

下面是一个示例（使用

-webkit-

供应商前缀，使用

-moz-

，

-o-

，

-ms-

以获得最佳兼容性）： 该示例仅适用于Chrome和Safari，因为我没有为紧凑示例添加其他前缀。

HTML（例如，设置

元素的动画）：

---

嗯，有几种方法。我实际上是这样做的：

基本上，我使用的是：

/* Replace -webkit- with moz-, -o-, -ms- for cross-browser compatibility */
#test {
    -webkit-transform-origin: top left;
    -webkit-animation-name: foo;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes foo {
    0%, 25% { /* State 1 */
        -webkit-transform: rotate(10deg) translate(100px, 200px);
        opacity: 0.05;
    }
    25%, 50% { /* State 2 */
        -webkit-transform: rotate(18deg) translate(150px, 240px);
        opacity: 0.25;
    }
    50%, 75% { /* State 3 */
        -webkit-transform: rotate(32deg) translate(160px, 280px);
        opacity: 0.55;
    }
    75%, 100% { /* State 4 */
        -webkit-transform: rotate(47deg) translate(170px, 290px);
        opacity: 0.78;
    }
}

然后在CSS中为每个帧创建一个类：

var changeFrame = function(elem, i) {
    elem.removeClass().addClass('frame'+i);
};

$(function() {
    var ball = $('#ball'),
        i = 1,
        timer = window.setInterval(function() {
            changeFrame(ball, i);
            i++;  
            if (i > 4) {
                clearInterval(timer);
            }        
        }, 250);    
});​

我没有使用CSS3动画，尽管有一个关于它的流行网站，因为我发现它们有时是CPU密集型的，而且你不需要tweening，也没有太多的意义

---

此外，通过使用JS，我们可以在每个流行的浏览器中使用它，从IE6到最新的WebKit。

好的，有几种方法。我实际上是这样做的：

基本上，我使用的是：

/* Replace -webkit- with moz-, -o-, -ms- for cross-browser compatibility */
#test {
    -webkit-transform-origin: top left;
    -webkit-animation-name: foo;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}
@-webkit-keyframes foo {
    0%, 25% { /* State 1 */
        -webkit-transform: rotate(10deg) translate(100px, 200px);
        opacity: 0.05;
    }
    25%, 50% { /* State 2 */
        -webkit-transform: rotate(18deg) translate(150px, 240px);
        opacity: 0.25;
    }
    50%, 75% { /* State 3 */
        -webkit-transform: rotate(32deg) translate(160px, 280px);
        opacity: 0.55;
    }
    75%, 100% { /* State 4 */
        -webkit-transform: rotate(47deg) translate(170px, 290px);
        opacity: 0.78;
    }
}

然后在CSS中为每个帧创建一个类：

var changeFrame = function(elem, i) {
    elem.removeClass().addClass('frame'+i);
};

$(function() {
    var ball = $('#ball'),
        i = 1,
        timer = window.setInterval(function() {
            changeFrame(ball, i);
            i++;  
            if (i > 4) {
                clearInterval(timer);
            }        
        }, 250);    
});​

我没有使用CSS3动画，尽管有一个关于它的流行网站，因为我发现它们有时是CPU密集型的，而且你不需要tweening，也没有太多的意义

---

此外，通过使用JS，我们可以在每个流行的浏览器中实现这一点，从IE6到最新的Webkits。

在css3中使用

transform:rotate

，在javascript中使用setTimeout。请给出一个例子？CSS3能精确地显示每个关键帧吗？@Otterly补充了一个例子。“动画”从状态1跳到状态2，跳到状态3到状态4。@Truth是的，我问了旋转、平移、不透明度变化和缩放，谢谢。只有一件事：如何将动画“附加”到对象？假设我有一个，这个.ball类将球图像定义为背景。现在，我如何将这个带有“ball”类的div附加到这些关键帧，以便球执行它们？@Otterly“foo”是动画的名称。它可以是任何有效的标识符。然后，使用

动画名称

属性添加动画。看我的例子，我确实使用了最少的必要代码，所有属性都是人类可读的（“名称”、“持续时间”、“迭代计数”）。能举个例子吗？CSS3能精确地显示每个关键帧吗？@Otterly补充了一个例子。“动画”从状态1跳到状态2，跳到状态3到状态4。@Truth是的，我问了旋转、平移、不透明度变化和缩放，谢谢。只有一件事：如何将动画“附加”到对象？假设我有一个，这个.ball类将球图像定义为背景。现在，我如何将这个带有“ball”类的div附加到这些关键帧，以便球执行它们？@Otterly“foo”是动画的名称。它可以是任何有效的标识符。然后，使用

动画名称

属性添加动画。看我的例子，我确实使用了最少的必要代码，所有属性都是人类可读的（“名称”、“持续时间”、“迭代计数”）。