CSS Animation not working when wrapped with another element

Question

I have the following HTML and CSS animation, and works as is expected.

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>

But, when the "loading" portion is wrapped with a div and H1, the animation doesn't work anymore.

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>

Is my CSS for the animation in the wrong place/specified incorrectly because of the wrapping elements?

Ori Drori · Accepted Answer · 2017-09-15T12:04:57.003

CSS transforms doesn't work on inline text elements. You need to set display: block or display: inline-block to .d:

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

Example:

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>

score 1 · Answer 2 · answered Sep 15 '17 at 12:03

Here is why:

CSS transform doesn't work on inline elements

To solve it, set .d has inline-block element.

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

CSS Animation not working when wrapped with another element

2 Answers2