Question

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

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

Answer 1

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

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

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

这是标记fyi：

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

诀窍是，将转换置于初始状态，在本例中为 div＃welcome h1 img ，然后将最终结果置于动作状态，即：hover样式。这意味着当用户翻身时，箭头将平稳地旋转，然后在滚动时旋转。

The ease part of the styling is explained here.

悬停关键帧CSS3上的缓入

1 个答案: