Уменьшение размера шрифта анимации - как избежать перемещения братьев и сестер - PullRequest
Новая
       17

Уменьшение размера шрифта анимации - как избежать перемещения братьев и сестер

0 голосов
/ 05 ноября 2018

Я бы сделал анимацию так:

  • начало: большой шрифт
  • анимация: уменьшить размер шрифта
  • конец: случайный размер шрифта

Проблема: анимированный элемент перемещает других. Как этого избежать?

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

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Вы можете сделать это, анимировав transform: scale() вместо font-size. Используя простую математику, вы можете рассчитать масштаб, используя размеры шрифтов, которые вы хотите анимировать в: 70/16 = 4.375.

Это также дает выигрыш в производительности, поскольку transform - это свойство CSS с графическим ускорением , а font-size - нет.

Редактировать: Обратите внимание, что вы должны объявить анимированный элемент inline-block, чтобы transform: scale() работал. 

.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>
0 голосов
/ 05 ноября 2018

РЕДАКТИРОВАТЬ / ПОЛНОСТЬЮ ПЕРЕЗАПИСАТЬ:

1.) Измените структуру HTML таким образом, чтобы 5 чисел были прямыми потомками .container (т.е. удалите span, который обертывает внутренние три)

2.) Измените grid-template-columns для контейнера на repeat(5, auto); (т.е. теперь 5 дочерних элементов вместо трех)

3.) Добавьте фиксированную ширину и text-align: center к всем прямым потомкам контейнера: 

.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>
...