悬停关键帧 CSS3 缓入

【问题标题】：Ease-in-out on hover Keyframe CSS3悬停关键帧 CSS3 缓入
【发布时间】：2012-02-23 08:11:03
【问题描述】：

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

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

【问题讨论】：

标签： animation css keyframe

【解决方案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);   
}

这是标记仅供参考：

<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.

【讨论】：