使用 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/