Angular 4 заполнить анимацию в процентах, когда процентные изменения

Question

Может кто-нибудь подсказать, как анимировать заливку цвета (до переменного процентного уровня) при загрузке страницы.Положение заполнения задается программно из компонента.Кстати, это ионные 4.

HTML

<div class="square-slider">
        <div class="catagory-connector" [style.borderColor]="getCatColor(c)"></div>
        <div class="square" [style.borderColor]="getCatColor(c)" [style.color]="getCatColor(c)">

          <div class="fill" [@testani]='fillState' [style.top.px]="getFillPosition(c)" [style.left.px]="getFillPosition(c)">
            <div class="wave-02" [style.backgroundColor]="getCatColor(c)"></div>
            <div class="wave-01" [style.backgroundColor]="getCatColor(c)"></div>
          </div>
        </div>
      </div>

CSS

.square {
  width: 70px;
  height: 70px;
  margin: 15px 0;
  position: relative;
  -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  border: 2px solid;
  border-radius: 5px;
  background: #262d37;
  overflow:hidden;
}

.square::after {
  content: "";
  position: absolute;
  border: 3px solid #262d37;
  border-radius: 5px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.wave-02 {
  position: absolute;
  width: 300%;
  height: 300%;
  left: -10%;
  top: 10%;
  border-radius: 40%;
  background:lightgreen;
  animation: rotate 7s linear infinite;
}
.wave-01 {
  position: absolute;
  width: 300%;
  height: 300%;
  background:green;
  border-radius: 42%;
  animation: rotate 10s linear infinite;
}

.fill {
  position:absolute;
  width:100%;
  height:100%;
  animation: fillan 10s linear forwards;
}
@keyframes rotate {
  100% { transform: rotate(360deg);}
}

Угловая анимация (с фиксированной позицией / размером заливки - заполняет половину)

  animations: [
    trigger('testani', [
        state('s1', style({
            transform: 'translate(-25px,-25px)',
        })),
        state('s2', style({
          transform: 'translate(0,0)',
        })),
        transition('s1 <=> s2', animate('5s ease-in')),
    ])
  ]

Приведенная выше анимация работает, когда я меняю состояние с s1 на s2 и наоборот при событии нажатия кнопки.

Но я хотел бы запустить анимацию заливки всякий раз, когда изменяются [style.top.px] и [style.left.px] (размер заливки).Сначала при загрузке страницы сверху и слева будет -25px, а затем он будет обновляться на основе данных, которые я получаю из базы данных, и когда пользователь изменяет их.

Обычно, когда я перемещаю (в динамическое положение) объект, я хочу, чтобы он двигался с анимацией (плавное перемещение)

Любое предложение о том, как связать анимацию со свойством.

Спасибо ВСЕМ