无法使用变换函数制作动画答案

【问题标题】：Unable to animate with transform functions无法使用变换函数制作动画
【发布时间】：2020-02-07 03:42:09
【问题描述】：

我一直在尝试使用几乎所有的变换函数为我的图像设置动画，但没有成功。

在谷歌搜索后，似乎设置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>

我的代码有什么问题？

提前致谢。

【问题讨论】：

标签： css flexbox css-animations

【解决方案1】：

您必须使用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>

【讨论】：

难以置信。有效。我觉得自己好傻。这次感冒一定对我造成了巨大的伤害。无论如何谢谢@IvanS95
没问题@Bradzer 这些小事对我来说也是最常见的问题，哈哈