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>

但是，当"加载" 部分用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变换对内联文本元素不起作用。您需要将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>

Answer 2

这就是原因：

CSS变换在内联元素上不起作用

要解决它，设置.d具有inline-block元素。

.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>