CODEWITHSUNDEEP
csscss-transitions
user2765804
user2765804

Reputation: 49

CSS text fade in vertically

I'm trying to make text fade in vertically, I thought of changing the line-height over time but didn't really know how to do so, any help ?

The div code:

#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;    
}

Upvotes: 1

Views: 2147

Answers (1)

vals
vals

Reputation: 64194

You just need to add the keyframes moving from the first property to the last. Add this to your stylesheet

@-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;}
}

Since I am seting as last property the css property of the element, there isn't any need to set a fillmode.

updated demo

Upvotes: 1

Related Questions