Невозможно анимировать с помощью функций преобразования - PullRequest
Новая
       5

Невозможно анимировать с помощью функций преобразования

0 голосов
/ 06 февраля 2020

Я безуспешно пытался оживить мое изображение практически всеми функциями преобразования.

После поиска в Google оказалось, что причиной может быть установка with: auto.

Но удаление его из моего стиля вообще ничего не меняет. Анимации по-прежнему нет.

Вот мой код: 

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.logo-container {
  display: flex;
  height: 100%;
  background-color: red;
  justify-content: center;
  align-items: center;
}

.logo {
  width: auto;
  transition: scale-me 1.5s ease-in;
  animation-iteration-count: infinite;
}

@keyframes scale-me {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
<body>
  <div class="logo-container">
    <img src="../images/Green-Monster-8-icon-128.png" class="logo" />
  </div>
</body>

Что не так в моем коде?

Заранее спасибо.

1 Ответ

3 голосов
/ 06 февраля 2020

Вы должны использовать animation вместо transition

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.logo-container {
  display: flex;
  height: 100%;
  background-color: red;
  justify-content: center;
  align-items: center;
}

.logo {
  width: auto;
  animation: scale-me 1.5s ease-in;
  animation-iteration-count: infinite;
}

@keyframes scale-me {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
<body>
  <div class="logo-container">
    <img src="https://via.placeholder.com/50" class="logo" />
  </div>
</body>
...