CODEWITHSUNDEEP
htmlcsscss-animations
3D_fun
3D_fun

Reputation: 603

Decreasing font size animation - how to avoid moving siblings

I would make animation like this:

Problem: animated element moves others. How to avoid it?

EDIT: https://codepen.io/anon/pen/LXVVPR

HTML

<div class='center'>
  <div class="container">
    <span>1</span>
    <span>
      <span class='animation'>2</span>
      <span> 3 </span>
      <span>4</span>
    </span>
    <span>5</span>
  </div>
</div>

CSS

.center{
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;

}
.container{

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  grid-gap: 20px;

  padding: 3px 10px 3px 10px;
  margin: 0 10px 0 10px;
}

.animation{
  animation: winner-animation 2s ease-in 0s 2 normal none;    
} 

@keyframes winner-animation{
  0% { font-size: 70px }
  100% { font-size: 16px }
}

Upvotes: 0

Views: 372

Answers (2)

Johannes
Johannes

Reputation: 67778

EDIT / COMPLETELY REWRITTEN:

1.) Change the HTML structure so that the 5 numbers are direct children of .container (i.e. remove the span which wraps the inner three)

2.) Change grid-template-columns for the container to repeat(5, auto); (i.e. now 5 children elements instead of three)

3.) Add a fixed width and text-align: center to all direct children of the container:

.container>span {
  text-align: center;
  width: 30px;
}


.center {
  height: 100vh;
  display: grid;
  align-items: center;
}

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  align-items: center;
  align-content: center;
  grid-gap: 20px;
  padding: 3px 10px 3px 10px;
  margin: 0 10px 0 10px;
}

.container>span {
  text-align: center;
  width: 30px;
}
.animation {
  animation: winner-animation 2s ease-in 0s 2 normal none;
}

@keyframes winner-animation {
  0% {
    font-size: 70px
  }
  100% {
    font-size: 16px
  }
}
<div class='center'>
  <div class="container">
    <span>1</span>
    <span class='animation'>2</span>
    <span> 3 </span>
    <span>4</span>
    <span>5</span>
  </div>
</div>

Upvotes: 0

ericcecchi
ericcecchi

Reputation: 28

You can accomplish this by animating transform: scale() instead of font-size. Using some simple math, you can calculate the scale using the font sizes you desire to animate to and from: 70/16 = 4.375.

This also has a performance benefit, since transform is a GPU-accelerated CSS property while font-size is not.

Edit: Note that you must declare the animated element inline-block for transform: scale() to work.

.center{
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;

}
.bar-container{

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  grid-gap: 20px;

  padding: 3px 10px 3px 10px;
  margin: 0 10px 0 10px;
}

.animation{
  display: inline-block;
  animation: winner-animation-scale 2s ease-in 0s infinite normal none;
}

@keyframes winner-animation{
  0% { font-size: 70px }
  100% { font-size: 16px }
}

@keyframes winner-animation-scale {
  0% { transform: scale(4.375); /* 70/16 */ }
  100% { transform: scale(1); }
}
<div class='center'>
  <div class="container">
    <span>1</span>
    <span>
      <span class='animation'>2</span>
      <span> 3 </span>
      <span>4</span>
    </span>
    <span>5</span>
  </div>
</div>

Upvotes: 1

Related Questions