How to make a proper resize animation in Safari?

Question

css

There are two blocks, they are animated to increase. On Chrome, Firefox works fine, on Safari the blocks slide down and to the right. Feeling like transform-origin: top left. Tried to animate width, scale, nothing helps.
Perfixes don't help either.

<div class="models">
   <div class="modelsframe"></div>
   <div class="modelsframe2"></div>
 </div>

.models
  {height: 700px; width: 700px;
  background-color: #1c1c1c;
  position: relative;
  overflow: hidden;}
.modelsframe
  {position: absolute;
  top: 50%; left: 50%;
  transform: translate(-47%, -49%) rotate(58deg);
  width: 200px; height: 300px;
  border: 1px solid white;
  border-radius: 20px;
  background-color: rgb(75, 75, 75);
  animation: modelsframe 27s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  transform-origin: center;}
  @keyframes modelsframe
  {15%{transform: translate(-47%, -49%) rotate(58deg);
    width: 200px; height: 300px;
    background-color: rgb(75, 75, 75);}
  20%{transform: translate(-50%, -50%);
    width: 500px; height: 650px;
    background-color: rgb(59, 62, 92);}
  50%{background-color: rgb(59, 62, 92);}
  55%{background-color: rgb(88, 88, 88);}
  90%{transform: translate(-50%, -50%);
    width: 500px; height: 650px;}
  98%{transform: translate(-47%, -49%) rotate(58deg);
    width: 200px; height: 300px;}}
.modelsframe2
  {position: absolute;
  top: 50%; left: 50%;
  transform: translate(-47%, -49%) rotate(31deg);
  width: 500px; height: 400px;
  border: 1px solid white;
  border-radius: 150px;
  animation: modelsframe2 27s;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  transform-origin: center;}

Answer 1

Change the percentages in transform: translate(-47%, -49%) to pixel values, it looks like safari doesn't recalculate percentages when changing width/height