CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sahil Dhir
Sahil Dhir

Reputation: 4250

Vertically align with translateY(-50%) giving a jerk?

How Can I fix the below code.. I have used the technique of transform:translateY(-50%) to make a div vertically center. But When I use it with animation , it first takes top:50% then it translates giving a jerk.. I don't want the jerk to happen and the element should automatically come in center.

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
<div class="element">
  Vertical Align is Awesome!
  <br /> But with animation its giving a jerk!<br/> Please Fix
</div>

Upvotes: 5

Views: 1581

Answers (2)

DavidDomain
DavidDomain

Reputation: 15303

The problem here ist the line-height, but you can actually use calc to fix that.

transform: translateY(calc(- 50% + 1.8em));

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(calc(- 50% + 1.8em));
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}
<div class="element">
  Vertical Align is Awesome!
  <br /> But with animation its giving a jerk!<br/> Please Fix
</div>

Upvotes: 0

Asons
Asons

Reputation: 87262

Your animation rule overwrites the translateY(-50%) with scale(), and when the animation is done, the previous rule gets applied again, hence it jumps.

If you add translateY(-50%) to the animation, it will work fine.

A side note, based on whether one put the translateY() before or after the scale(), it animates differently, as transform values gets applied from right to left

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: translateY(-50%) scale(0);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
  }
}

@keyframes zoom {
  from {
    transform: translateY(-50%) scale(0); 
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}
<div class="element">
  Vertical Align is Awesome!
  <br /> But with animation its giving a jerk!<br/> Please Fix
</div>

Upvotes: 6

Related Questions