时间戳

首页 > 解决方案 > 无法使用变换函数制作动画

css - 无法使用变换函数制作动画

问题描述

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

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

我的代码有什么问题？

提前致谢。

标签： cssflexboxcss-animations

解决方案

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

推荐阅读