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属性，因此无需设置fillmode。

CSS文本垂直淡入淡出

1 个答案:

updated demo