animationDelay not applying

[dcramer]

Using React v15.6.1 the animationDelay style does not appear to be applying.

Here's the specific I was working with trying to debug the problem:

import React, {Component} from 'react';

import './PageLoadingIndicator.css';

export default class PageLoadingIndicator extends Component {
  render() {
    let points = 1;
    let duration = 2; // seconds
    let durationPerBit = duration / points;
    let bitWidth = 100 / points;
    let height = 4;
    return (
      <div
        style={{
          display: 'block',
          height: height,
          position: 'fixed',
          width: '100%',
          left: 0,
          right: 0,
          top: 0
        }}>
        {[...Array(points)].map((_, i) => {
          console.log(durationPerBit * (i + 1));
          return (
            <span
              key={i}
              style={{
                display: 'inline-block',
                borderRadius: 0,
                background: '#fff',
                height: height,
                opacity: 0,
                position: 'absolute',
                left: `${bitWidth * i}%`,
                width: `${bitWidth}%`,
                animationDelay: `${durationPerBit * (i + 1)}s`,
                animation: `${duration}s ease infinite pageLoadingAnim`
              }}
            />
          );
        })}
      </div>
    );
  }
}

Upon inspection, the rendered HTML looks like:

<div style="display: block; height: 4px; position: fixed; width: 100%; left: 0px; right: 0px; top: 0px;">
    <span style="display: inline-block; border-radius: 0px; background: rgb(255, 255, 255); height: 4px; opacity: 0; position: absolute; left: 0%; width: 100%; animation: pageLoadingAnim 2s ease infinite;"></span>
</div>

[aweary]

@dcramer animation is a shorthand property that includes animation-delay, so I believe it's expected behavior that it would overwrite the previous animation-delay style. Could you include the delay in the animation property?

Do you know if this worked in previous React versions?

[dcramer]

@aweary not sure if it ever worked and pardon my ignorance for not realizing that. It was working in the style sheet due to order if operations and I was just translating it over.

[aweary]

@dcramer no worries! We've had some previous discussions about warning for overlapping styles like this. See #6348, which links to a lot of the discussions. For now, you can get around this by either including the delay in the animation shorthand property, or explicitly using each expanded property, like animation-name, etc.

[dcramer]

👍