使用 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 NAME-YOUR-ANIMATION {

0% { opacity: 0; }

100% { opacity: 1; }

}

也可以用文字代替步骤

from { ... }

to { ... }

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

#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/

使用 css 变换使图像旋转

Getting an image to rotate with css transform

html

css

animation

css-transitions