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.9s），它会将图像从0度旋转到20度。
对于接下来的50％（50％ - 100％），它会将图像从20度旋转到-20度。
为了使动画具有更平滑的外观，您还可以在两者之间和结尾处旋转0度（如下面的示例2所示）。
如果你想在1.8s窗口中单独发生0到20，在20到-20度之间再拿1.8s，那么你可以在-webkit-animation属性值中将动画持续时间增加到3.6s（如下所示）最后）。

注意：我假设你知道使用-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

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

1 个答案: