鼠标悬停上的跳动文本

Question

我有一个图像，我想让覆盖的文本在鼠标悬停时移动(我也尝试过悬停，但没有更好的结果(，而文本想在鼠标悬停上反弹。

CSS

.backgroundImage {
/*opacity: .7;*/
display: block;
width: 100%;
height: auto;
}

HTML

section style="float: left;">
<img src="_images/engaged-buying-a-home.jpg" alt="Avatar" 
class="backgroundImage" style="width:82%; ">
</section>
<section id="textbox" style="clear: both; float: left; width: 48%; height: 
18em; 
margin-top: -18em; z-index: 10;">
<p style="font-size: 2.0em; margin-top: 6.5em; margin-left: 4.5em; 
color: #FFF; z-index: 10;" >Seller Services</p>
<a href="sellers.html"><p id="learn" style="font-size: 1.5em; margin-top: 
-1em; margin-left: 6.0em; border: 1px solid #FFF; color: #000; padding: 
.5em 1em; width: 8em; display: none;">Read More &nbsp;&nbsp;&nbsp;&nbsp;&#8594; 
</p></a>
</section>

jQuery:

<script>
$(document).ready(function(){
$("#textbox").mouseenter(function(){
$(this).animate({marginTop: "-=200px"},2000)
});
});
</script>
<script>
$(document).ready(function(){
$("#textbox").mouseenter(function(){
$("#learn").show(200)
});
});
</script>
<script>
$(document).ready(function(){
$("#textbox").mouseleave(function(){
$(this).animate({marginTop: "+=200px"},2000)
});
});
</script>
<script>
$(document).ready(function(){
$("#textbox").mouseleave(function(){
$("#learn").hide(200)
});
});
</script>

顺便说一句，我计划在开始工作后将样式放在CSS中。如有任何帮助，我们将不胜感激。

感谢

Answer 1

您只需使用@keyframes的CSS就可以做到这一点。请注意，动画仅在用户处于:hovering时播放，因此，如果元素从用户光标下移出，动画将停止。

在这个例子中，我通过将填充从元素的一侧移动到另一侧来解决这个问题。

div
{
padding-top: 100px;
padding-bottom: 0;
}
div:hover
{
animation: bounce linear infinite 1s;
}
@keyframes bounce
{
0%{
padding-top: 100px;
padding-bottom: 0;
}

50%{
padding-top: 0;
padding-bottom: 100px;
}

100%{
padding-top: 100px;
padding-bottom: 0;
}
}

<div>Hover me</div>