悬停关键帧 CSS3 缓入

Posted 2023-03-06

【中文标题】悬停关键帧 CSS3 缓入

【英文标题】：Ease-in-out on hover Keyframe 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; 

【参考方案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.