悬停时从右侧滑出，鼠标移出时从左侧滑入

Question

http://jsfiddle.net/vladimir_ze/ror4ccry/

我正在尝试使用 CSS 实现两种滑动效果。

悬停时，箭头应该滑出方框（向右移动），那是没问题。
鼠标离开时，箭头应滑入框内（从左起）

我试着用过渡来做，但我不确定是否可以那样做，如果不能，是否可以用关键帧来做？

.arrow {
        width: 30px;
        border: 1px solid blue;
        overflow: hidden;
        margin-left: 50px;
    }

i.fa {
    font-size:50px;
    -webkit-transition-duration: 1s;
    -webkit-transform: translateX(1px);
}

.arrow:hover i {
    -webkit-transition-duration: 500ms;
    -webkit-transform: translateX(30px);
}


<div class="arrow">
   <i class="fa fa-angle-right"></i>
</div>

Answer 1

这是 forked fiddle 的功能。关键帧动画就搞定了。

代码重要部分：

.arrow i {

    /* animate initial appearance and whenever state returns to normal from :hover */
    -webkit-animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
     animation: translate-left-in 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
}

.arrow:hover i {

    /* animate on hover */
    -webkit-animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);
    animation: translate-left-out 0.3s 1 cubic-bezier(0.7, 0, 0.3, 1);

    /* Keep the state after the animation has finished */
    -webkit-transform:translateX(30px);
    transform:translateX(30px);
}

/* Keyframes */
@-webkit-keyframes translate-left-in {
    0%   { -webkit-transform:translateX(-30px); }
    100% { -webkit-transform:translateX(0); }
}
@keyframes translate-left-in {
    0%   { transform:translateX(-30px); }
    100% { transform:translateX(0); }
}

@-webkit-keyframes translate-left-out {
    0%   { -webkit-transform:translateX(0%); }
    100% { -webkit-transform:translateX(30px); }
}
@keyframes translate-left-out {
    0%   { transform:translateX(0%); }
    100% { transform:translateX(30px); }
}

Answer 2

您也可以使用 jQuery 非常简单地做到这一点。

样式：

.arrow {
     width: 30px;
     height: 50px;
     border: 1px solid blue;
     overflow: hidden;
     margin-left: 50px;
     position: relative;
}
i.fa {
     width: 30px;
     height: auto;
     display: block;
     font-size: 50px;
     position: absolute;
     top: 0;
}

jQuery:

$('body').on('mouseover', '.fa-angle-right', function() {
    $(this).animate({left: '30px'}, 500, function() {
        $(this).css('left','-31px');
    });
});
$('body').on('mouseout', '.fa-angle-right', function() {
   $(this).animate({left: '0'}, 500);
});

如果您将 child 绝对定位在 parent 内（.arrow），您可以通过 jQuery 利用 overflow: hidden 和 left 样式来实现您的目标.由于您已经为 parent (.arrow) 设置了隐藏溢出，因此您可以为设置动画以滑出边界。动画完成后，您可以将的绝对定位（左侧样式）更改为 return 到起始位置（在 parent 右侧并因溢出而隐藏：隐藏).然后简单地设置 动画以滑回边界。

Answer 3

DEMO

完成起来有点棘手。

添加 animation 开始时仅播放 1 次。
悬停播放过渡（或动画）
如果您在悬停时使用过渡，请将动画设置为 none:
这样做是重置动画，然后在您移除光标时再次播放它，因为它会在 css.

CSS

elem. {
    width: 20px;
    transition, width 2s;
    animation: myanimation 2s 1; <- this playes first
}

elem:hover {
    //transitioned property's here
    width: 10px;
    //Remove animation for replay
    animation: none;
}

@keyframe {
    //your animation propertys etc.
}

悬停时从右侧滑出，鼠标移出时从左侧滑入

Slide out from right on hover, slide in from left on mouse out

css

css-transitions

keyframe