问CSS中的动画-在缩放和旋转同时缩放
EN

Stack Overflow用户

提问于 2020-08-08 00:35:08

回答 1查看 1.2K关注 0票数 1

试图同时运行两个动画，但只放大动画，似乎是可行的，但旋转动画。有人能帮忙吗？

这是密码

.container {
  margin: 50px;
}

.animation {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  background-color: red;
  animation: spin 5s, zoomInZoomOut 2s;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes zoomInZoomOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

<div class="container">
  <div class="animation"></div>
</div>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-08 00:46:38

您需要在.container上使用.container来显示spin和zoomIn & zoomOut。

此外，您还需要在容器上设置position: absolute，使其在旋转时不会移动。

演示：

.container {
  margin: 50px;
  position: absolute;
  animation: zoomInZoomOut 5s infinite;
}

.animation {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  background-color: red;
  animation: spin 5s;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes zoomInZoomOut {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

<div class="container">
  <div class="animation"></div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63310698

复制

相似问题

问CSS中的动画-在缩放和旋转同时缩放
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的动画-在缩放和旋转同时缩放EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的动画-在缩放和旋转同时缩放
EN