Question

嘿
我正在寻找一种方法让我的图像旋转~50度，暂停一小段时间（>一秒），另一种方式旋转到〜-50度，然后返回原点。并重复一遍。

我无法告诉它旋转回来。任何帮助都会非常好。

Ahuge

Answer 1

webkit中的动画可以非常简单。首先使用@-webkit-keyframes rule声明动画效果：

@-webkit-keyframes swing {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

Webkit使用称为关键帧的动画技术。如果你熟悉Flash或3D动画，你就会知道它是什么。基本上，您在一系列“关键帧”中为元素设置了某些位置，并且根据您使用另一组规则声明的设置，它将在您设置的关键帧之间平滑地“动画化”元素。

好的，一旦我们定义了动画，我们就会使用-webkit-animation-name及相关属性来应用它。

div {
 -webkit-animation-name: swing;
 -webkit-animation-duration: 6s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

这会附加bounce动画，告诉它“播放”6秒钟10次并使其他所有动画反向播放。

使用百分比值指定关键帧，“from”相当于0%，“to”与100%相同。

据我所知，这仅适用于Webkit nightly builds，所以绝大多数用户都不会看到这一点。

Here is an example for you虽然除非你使用每晚构建，否则它不会动画。

如果您希望更多的用户群能够看到此动画，我建议您使用jQuery解决方案。

如何在WebKit中使用CSS实现摆动动画？

1 个答案: