<div></div>

@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
div {
  --translate: -50%, -50%;
  --scale: 1;
  width: 200px;
  height: 200px;
  background: royalblue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(var(--translate)) scale(var(--scale));
  /* transition: .3s; */
  animation: scale 1s infinite linear alternate;
}
@keyframes scale {
  from {
    --scale: 1;
  }
  to {
    --scale: 1.5;
  }
}