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％{不透明度：0; }

100％{不透明度：1; }

}

您也可以用文字替换步骤

来自{...}

到{...}

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

＆＃13;

#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);
    }
}

＆＃13;

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

＆＃13;

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

使用css转换使图像旋转

1 个答案: