Animation 在悬停关键帧CSS3上缓进缓出

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

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

---

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

在我一直在处理的示例中，我想要一个箭头，它在翻转时朝向右侧，然后平滑地旋转以指向下方。代码如下：

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>

诀窍是，将转换置于初始状态，在本例中是img，然后将最终结果置于动作状态，即：悬停样式。这意味着当用户翻滚时，箭头将在翻滚时平稳地向内旋转，然后向外旋转

---

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

在我一直在处理的示例中，我想要一个箭头，它在翻转时朝向右侧，然后平滑地旋转以指向下方。代码如下：

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>

诀窍是，将转换置于初始状态，在本例中是img，然后将最终结果置于动作状态，即：悬停样式。这意味着当用户翻滚时，箭头将在翻滚时平稳地向内旋转，然后向外旋转