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

如果您绝对定位您的孩子＆lt; i＆gt;在你的父（.arrow）中，你可以通过jQuery利用overflow：hidden和left样式来实现你的目标。由于您已为父（.arrow）提供了隐藏的溢出，因此您可以为＆lt; i＆gt;设置动画。滑出界限。完成该动画后，您可以更改＆lt; i＆gt;的绝对定位（左侧样式）。返回到起始位置（由于溢出而隐藏在父级的右侧并隐藏）。然后简单地为＆lt; i＆gt;设置动画。滑回界限。

Answer 3

DEMO

完成这项工作有点棘手。

添加animation仅在一次开始时播放。
关于悬停播放转换（或动画）
如果在悬停上使用转场，则将动画设置为无：
这样做是重置动画，然后在删除光标时再次播放它，因为它会在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.
}

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

3 个答案: