Масштабирование, вызывающее странные отскоки - PullRequest
Новая
       7

Масштабирование, вызывающее странные отскоки

0 голосов
/ 11 сентября 2018

Я пробовал некоторые CSS-анимации и обнаружил, что, если я масштабируюсь из нижнего левого угла ограничивающей рамки, левая сторона немного подпрыгнет вправо, прежде чем вернуться обратно туда, где она должна быть.

Все остальное выглядит правильно.Верхняя и правая стороны выглядят так, как будто они плавно и равномерно движутся к нижней и левой сторонам соответственно, а нижняя вообще не движется.

Что здесь происходит?Почему движется левая сторона? 

.shrink {
  border-style: solid;
  border-width: 1px;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); }
  to { transform: scale(.7); transform-origin: 0% 100% 0; }
}
<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>

Это происходит на FF, Chrome, IE и Edge.По крайней мере, это соответствует.:)

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

О.Duh!Начало преобразования различается между началом и концом.Это устраняет проблему. 

.shrink {
  border-style: solid;
  border-width: 1px;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); transform-origin: 0% 100% 0; }
  to { transform: scale(.7); transform-origin: 0% 100% 0; }
}
<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>
0 голосов
/ 11 сентября 2018

Попробуйте поместить источник преобразования в класс .shrink. 

.shrink {
  border-style: solid;
  border-width: 1px;
  transform-origin: bottom left;
  animation-name: title-min;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes title-min
{
  from { transform: scale(1); }
  to { transform: scale(.7); }
}
<body>
  <h1 class="shrink">
    Hello
  </h1>
</body>
...