使用其他元素包装时，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>

Answer 2

原因如下：

CSS transform doesn't work on inline elements

要解决此问题，请将.d设为inline-block元素。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;