html - 用另一个元素包裹时，CSS 动画无法正常工作

Question

我有以下 HTML 和 CSS 动画，并且按预期工作。

app-root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: all 0.8s ease-out;
}

body {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
}

.loading h1 {
  color: #272C33;

  font-size: 1.5em;
  font-family: -apple-system,
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Oxygen-Sans",
    "Ubuntu",
    "Cantarell",
    "Helvetica",
    sans-serif;

  text-align: center;
}

@keyframes dots {
  50% {
    transform: translateY(-0.25em);
  }
  100% {
    transform: translateY(0);
  }
}

.d {
  animation: dots 2.0s ease-out infinite;
}
.d-2 {
  animation-delay: 0.5s;
}
.d-3 {
  animation-delay: 1s;
}

<app-root>
  Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>

但是，当 “loading” 部分被 div 和 H1 包裹时，动画不再起作用。

app-root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: all 0.8s ease-out;
}

body {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
}

.loading h1 {
  color: #272C33;

  font-size: 1.5em;
  font-family: -apple-system,
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Oxygen-Sans",
    "Ubuntu",
    "Cantarell",
    "Helvetica",
    sans-serif;

  text-align: center;
}

@keyframes dots {
  50% {
    transform: translateY(-0.25em);
  }
  100% {
    transform: translateY(0);
  }
}

.d {
  animation: dots 2.0s ease-out infinite;
}
.d-2 {
  animation-delay: 0.5s;
}
.d-3 {
  animation-delay: 1s;
}

<app-root>
  <div class="loading">
    <h1>Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span></h1>
  </div>
</app-root>

我的动画 CSS 是否因为包装元素而位于错误的位置/指定不正确？

Answer 1

CSS 转换 doesn't work on inline text elements .您需要将display: block 或display: inline-block 设置为.d:

.d {
  display: inline-block;
  animation: dots 2.0s ease-out infinite;
}

例子:

app-root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transition: all 0.8s ease-out;
}

body {
  background: #FFFFFF;
  margin: 0;
  padding: 0;
}

.loading h1 {
  color: #272C33;

  font-size: 1.5em;
  font-family: -apple-system,
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Oxygen-Sans",
    "Ubuntu",
    "Cantarell",
    "Helvetica",
    sans-serif;

  text-align: center;
}

@keyframes dots {
  50% {
    transform: translateY(-0.25em);
  }
  100% {
    transform: translateY(0);
  }
}

.d {
  display: inline-block;
  animation: dots 2.0s ease-out infinite;
}
.d-2 {
  animation-delay: 0.5s;
}
.d-3 {
  animation-delay: 1s;
}

<app-root>
  <div class="loading">
    <h1>Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span></h1>
  </div>
</app-root>