2

尝试使用关键帧为简单的旋转设置动画。这一切都很好，但我讨厌它在鼠标关闭时突然停止。我试过了：

 -webkit-animation-timing-function: ease-in-out;

但这仅适用于帧而不是整个动画。

这就是我所拥有的，任何帮助表示赞赏。

@-webkit-keyframes Rotate {
0% {
    -webkit-transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(360deg);
} }

和悬停

a:hover {
-webkit-animation-name: Rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; }
4

1 回答 1

0

我不确定这是否适用于关键帧，但我会继续假设它会。

在我一直在研究的示例中，我想要一个朝右的箭头，然后在翻转时平滑地旋转指向下方。这是代码：

div#welcome img{
            -webkit-transition: 1.5s all ease;
            -moz-transition: 1.5s all ease;
            -o-transition: 1.5s all ease;
    transition: 1.5s all ease;               
}

div#welcome:hover img {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    transform: rotate(90deg);   
}

这是加价仅供参考：

<div id="welcome">
            <h1>Welcome
            </h1>
            <img class="hover" src="images/arrow.png" />
            <p>
               blah blah blah
            </p>
        </div>

诀窍是，将您的转换置于初始状态，在本例中为div#welcome h1 img，然后将最终结果置于操作状态，即 :hover 样式。这意味着当用户翻滚时，箭头将平滑地向内旋转，然后在滚下时向外旋转。

这里解释了样式的简单部分。

于 2012-04-10T11:07:28.140 回答