css - 你如何使用 css3 动画左右旋转？

Question

我有一张脸的图像。我想左右旋转/旋转它。向右 20 度，向左 20 度。

到目前为止，这是我的代码:

<img class="image"> 

CSS

.image {

-webkit-animation:spin 1.8s linear infinite;

}

@-webkit-keyframes spin {

from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(20deg); }

}

我可以让它朝一个方向移动，但我怎样才能让它朝另一个方向返回？

我认为它应该像这样工作:自旋 从 0 度到 20 度从 20 度到 -20 度。我试过了，但没用。

Answer 1

您无法在动画中使用 from 和 to 来实现它，但您可以使用如下百分比选项:

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(-20deg);
    }
}

解释:

• 对于动画持续时间的前 50%(0-0.9 秒)，它将图像从 0 度旋转到 20 度。
• 对于接下来的 50%(50% - 100%)，它将图像从 20 度旋转到 -20 度。
• 为了使动画看起来更流畅，您还可以在中间和结束时旋转到 0 度(如下面的示例 2 所示)。
• 如果您希望 0 到 20 单独发生在 1.8 秒的窗口中，而 20 到 -20 度需要另外 1.8 秒，那么您可以在 -webkit-animation 属性值如下(最后)。

注意:我假设您知道使用 -webkit- 前缀，动画效果只能在支持 webkit 的浏览器中看到。对于 Firefox，您必须为动画、关键帧和转换属性添加 -moz-，并且为了将来的合规性，您还必须添加标准的无前缀版本。

.image {
    -webkit-animation:spin 3.6s linear infinite;
}

Fiddle Demo

---

示例 2 - 具有更平滑的旋转效果

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% { /* note that rotation from 0 to 20 deg happens in 25% time = 0.45 seconds. */
        -webkit-transform: rotate(20deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }    
}

Demo for Sample 2