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>

​