设置文本动画，使其从下到上显示html/css

Animating text to appear from the bottom up html/css

本文关键字：显示 html css 从下到上 置文本 动画      更新时间：2023-09-26

当用户以以下方式悬停在文本上时，我当前会显示文本：

.item{
  color: transparent;
  font-weight: bold;
  text-align: center;
}

然后在我的JQuery悬停中，我将颜色设置为黑色：

 $(".item").hover(function () {
    $(this).css("color", "black");
}, function () {
    $(this).css("color", "transparent");
});

然而，我问，如果有某种webkit-animation或滚动功能，我不知道当div悬停时，是否希望文本从div的底部滚动到其中间的位置或位于的任何位置时

我正在研究过去的答案，我发现了一些非常长而复杂的答案，并希望能找到一些我忽略的简单答案。

使用CSS转换

JS Fiddle

.item {
  width: 300px;
  height: 300px;
  outline: 1px solid skyblue;
  margin: 5px;
  text-align: center;
}
.item .content {
  position: relative;
  top: 270px;
  /* 270px top + 30px line height = 300px outer container height */
  line-height: 30px;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.item:hover .content {      
  /* centering text vertically 135px top + 15px (line-height/2) = 150px half the container height */
  top: 135px;
}
<div class="item"><span class="content">dummy text for test</span>
</div>

相关文章：