javascript - 如何使用 JavaScript/CSS 为 DOM 元素设置动画

Question

我正在开发一款具有战略性视觉叠加层的国际象棋游戏。其中之一需要棋子和方 block 的一些轻动画，特别是缓慢而稳定的脉冲。我的板子是一个，每个都是一个正方形。通过将 CSS 中的背景图像设置为其包含的片段的 .svg 来显示片段。

这可以用 CSS 完成吗？我使用的是不支持旧版本的最新浏览器，所以我可以使用所有漂亮的 CSS3 东西。我考虑的另一个选择是将棋盘的背景图像设置为棋子跳动的动画 .gif。这行得通吗？

还有没有我没有提到的其他方法？我想避免使用包/框架，但我正在使用 jQuery。

澄清:

我想让棋子有点脉冲(闪光？)到位以强调。我希望它是一个缓慢、微妙且一致的脉冲，一直持续到另一个事件将其关闭。

Answer 1

听起来您正在寻找 CSS 动画。

看这里:http://www.w3.org/TR/css3-animations

特别是您需要以下计时功能:

• animation-name，指定要使用的关键帧集。
• animation-duration，指定动画的速度。
• animation-iteration-count，重复动画。
• animation-direction，改变动画的方向。

您还需要创建一些关键帧，让您可以指定动画修改了哪些 CSS 属性。

此外，您需要为所有内容添加 vendor 前缀，因此您需要编写 -webkit-animation-name 而不是 animation-name(例如)，以及为 -moz 和其他 vendor 重复所有内容。

这是创建脉动不透明效果的 webkit 示例。您可以尝试使用 from 和 to 部分中的属性来设置尺寸、颜色等的动画。

.chess-piece {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: pulse;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes pulse {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

JSFiddle example for webkit and moz