css - CSS 文本垂直淡入

Question

我试图让文本垂直淡入，我想随着时间的推移改变行高，但真的不知道该怎么做，有什么帮助吗？

div代码：

#bigimage {
width: 270px;
height: 200px;
float: left;
text-align: center;
line-height: 200px;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: 36px;
transition: all ease-in-out 0.2s;
cursor: pointer;
animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;    
}

Answer 1

您只需要添加从第一个属性移动到最后一个属性的关键帧。将此添加到您的样式表

@-webkit-keyframes fadein {
    0% {line-height: 280px;}
  100% {line-height: 200px;}
}

@-moz-keyframes fadein {
    0% {line-height: 280px;}
  100% {line-height: 200px;}
}
@-o-keyframes fadein {
    0% {line-height: 280px;}
  100% {line-height: 200px;}
}
@keyframes fadein {
    0% {line-height: 280px;}
  100% {line-height: 200px;}
}

由于我将元素的 css 属性设置为最后一个属性，因此无需设置填充模式。

更新的演示