Css 鼠标悬停时从右滑出，鼠标移出时从左滑入_Css_Css Transitions_Keyframe

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

css

Css 鼠标悬停时从右滑出，鼠标移出时从左滑入,css,css-transitions,keyframe,Css,Css Transitions,Keyframe,我正在尝试使用CSS实现两种滑动效果悬停时，箭头应该从框中滑出，向右移动，就是这样没问题鼠标左键时，箭头应从左侧滑入框中我试着用过渡来做，但我不确定是否可以这样做，如果不能，是否可以用关键帧来做 .arrow { width: 30px; border: 1px solid blue; overflow: hidden; margin-left: 50px; } i.fa { font-size:50px;

我正在尝试使用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>

下面是有关功能的详细信息。这是通过关键帧动画完成的

守则的重要部分：

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

下面是有关功能的详细信息。这是通过关键帧动画完成的

守则的重要部分：

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

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

如果您将您的孩子绝对定位在parent.arrow中，您可以通过jQuery使用overflow:hidden和left样式来实现您的目标。由于已为parent.arrow指定了溢出的hidden，因此可以设置动画使其滑出边界。动画完成后，可以更改的“左”样式的绝对位置，以返回到父级右侧的开始位置，并由于溢出而隐藏：隐藏。然后简单地设置动画以滑回边界。

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

这有点棘手

添加了仅在开始时播放1次的动画。关于悬停播放过渡或动画如果在悬停上使用过渡，请将动画设置为“无”：这样做的目的是重置动画，然后在移除光标时再次播放动画，因为css会再次添加动画。 CSS

这有点棘手

对于转换，您可能无法做到这一点，因为它们在状态之间交替，并且这些状态将不相同。动画可能是可能的，但它可能需要一些思考。也许你可以通过转换来实现这一点，因为它们在状态之间交替，而这些状态是不同的。动画可能是可能的，但它可能需要一些思考。我喜欢这个答案。但你为什么对你在这里的实际工作解释得这么少？有足够的空间improvement@Persijn-你说得对。我没有想到要透露细节。将编辑。很好的解决方案，但是，如果可能的话，我更喜欢CSS解决方案。我喜欢这个答案。但你为什么对你在这里的实际工作解释得这么少？有足够的空间improvement@Persijn-你说得对。我没有想到要透露细节。将进行编辑。很好的解决方案，但是，如果可能，我更喜欢使用CSS解决方案。回答不错，为什么不添加更多关于为什么使用两个动画以及为什么使用立方贝塞尔曲线的解释？回答不错，为什么不添加更多关于为什么使用两个动画以及为什么使用立方贝塞尔曲线的解释？