获取图像以使用 css 转换旋转

Question

我有一个我创建的手的图像，我试图让这只手看起来好像在挥舞。图像最初应该是其原始形式，即手指指向左侧，然后在 4 秒内，我希望手慢慢向右旋转到 70 度点。现在，它用手指在 70 度点加载并且什么也不做。

我做错了什么？

#blue {
  background-color: blue;
}
.hand {
    width: auto;
    height: 400px;
    position: relative;
    -webkit-animation-name: wave; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
    animation-name: wave;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-direction: normal;
}
 @keyframes wave {
    from,100% {
    -ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* Chrome, Safari, Opera */
    transform: rotate(75deg);
    }

<div id="blue">
  <img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

Answer 1

这是

正确的CSS动画语法

@keyframes 命名你的动画{

0% { 不透明度： 0; }

100% { 不透明度： 1; }

}

您也可以将步骤替换为字词

从 { ... }

到 { ... }

您的代码末尾缺少一个}，并使用相同的属性标记动画的开始和结束......对象在每个状态下都不同，因此您必须分开步骤。

#blue {
  background-color: blue;
}
.hand {
    width: auto;
    height: 400px;
    position: relative;
    -webkit-animation-name: wave; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
    animation-name: wave;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
 @keyframes wave {
    100% {
    -ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* Chrome, Safari, Opera */
    transform: rotate(75deg);
    }
}

<div id="blue">
  <img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

更多信息 https://css-tricks.com/snippets/css/keyframe-animation-syntax/