CODEWITHSUNDEEP
csscss-animations
Tony Stonks
Tony Stonks

Reputation: 360

CSS Line Height Animation

I have an interesting situation.

What I want to achieve is that, instead of spreading from top to bottom, the animation will spread from the middle.

I also want to achieve this without any help of JS/jQuery.

Appreciate your thoughts :)

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
}
h1:hover {
  line-height: 60px;
}
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1>

Upvotes: 2

Views: 5758

Answers (2)

Nestor
Nestor

Reputation: 694

Easy, Just use the line-height in this case, or you can use flex as well. The only issue is the height of the container, in this case I use the 120px, that is the max height that the text can expand, you can also use height:100%; or height:100vh on the 

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  display:inline-block;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
  vertical-align:middle;
  
}
h1:hover {
    line-height: 60px;
  }
.container-mod{
  margin-top: 30px;
  height:100vh;
  
}
.container-mod:before{
    content:"";
    vertical-align:middle;
    display: inline-block;
    height:100%;
  }
<div class="container-mod"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni, molestias possimus, rerum voluptates dolorum aliquam est soluta animi inventore ut at eius voluptatum quod omnis.</h1></div>

Upvotes: 0

Suresh
Suresh

Reputation: 427

Just wrap this text in a wrapper, give it a height, position the text in center vertically and it will work. View it in full page.

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
}

h1:hover {
    line-height: 60px;
  }

.wrapper {
  height: 400px;
  display: flex;
  align-items: center;
}
<div class="wrapper">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni. consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni.</h1>
</div>

Upvotes: 4

Related Questions