htmlcsscss-animations

Keyframes animation not playing on Firefox

My css animation works how I want it to on Edge and Chrome but refuses to initialize on Firefox, I've tried including both the -moz- and -keyframes- tags for the animation and keyframes properties but nothing can get it to work on the mobile or desktop version of Firefox.

I've included my animation below, any help is appreciated.

.slogan {
    opacity: 0;
    transform: translateY(2.5rem);
    animation: fade 2s ease 0.8s forwards;
}

@keyframes fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.consumer {
    transform: translateY(2.5rem);
    background:
      linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 1px no-repeat,
      linear-gradient(currentColor 0 0) 100% calc(100% - 8px) /var(--d, 0) 1px no-repeat;
    animation: underline 1s ease 1.5s forwards;
}

@keyframes underline {
    to {
        --d: 100%;
        background-position: 0% calc(100% - 1px), 100% calc(100% - 2px);
        transition: 1s, background-position 1s 1s;
        transform: translateY(0);
    }
}
<div class="slogan">
    <h2>Your <span class="consumer">consumer-driven</span> web hosting service.</h2>
</div>

Edit: This is the expected behaviour: https://imgur.com/a/SvPh9PO

Solution

  • The keyframes are running fine, it's the values used by the keyframes that are different

    Define from

    It seems FireFox and chrome are handling the default value for --d differently. Setting a from and value for --d results in the same behavior for FireFox and Webkit.

    from {
  --d: 0;
}


    .slogan {
  opacity: 0;
  transform: translateY(2.5rem);
  animation: fade 2s ease 0.8s forwards;
}

@keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.consumer {
  transform: translateY(2.5rem);
  background: linear-gradient(currentColor 0 0) 0 100% /var(--d, 0) 1px no-repeat, linear-gradient(currentColor 0 0) 100% calc(100% - 8px) /var(--d, 0) 1px no-repeat;
  animation: underline 1s ease 1.5s forwards;
}

@keyframes underline {
  from {
    --d: 0
  }
  to {
    --d: 100%;
    background-position: 0% calc(100% - 1px), 100% calc(100% - 2px);
    transition: 1s, background-position 1s 1s;
    transform: translateY(0);
  }
}
    <div class="slogan">
  <h2>
    Your <span class="consumer">consumer-driven</span> web hosting service.
  </h2>
</div>

    Custom properties in keyframes

    This is relatively new tech, generally you would want to define a @property for these.
    It can set defaults and apply constraints to the custom property (--d)

    @property

    use a @property declaration for the custom property that receive a value in your keyframes.

    @property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0;
}

    This question explores the topic further.

    Both browsers also fail to swap between number '0' and percentage '0%' in the var(--d, 0) rule.
    Using var(--d, 0%) will result in what I think is the intended effect.

    @property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.slogan {
  opacity: 0;
  transform: translateY(2.5rem);
  animation: fade 2s ease 0.8s forwards;
}

@keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.consumer {
  --d: 0%;
  transform: translateY(2.5rem);
  background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0%) 1px no-repeat, linear-gradient(currentColor 0 0) 100% calc(100% - 8px) / var(--d, 0%) 1px no-repeat;
  animation: underline 1s ease 1.5s forwards;
}

@keyframes underline {
  from {
    --d: 0%;
  }
  to {
    --d: 100%;
    background-position: 0% calc(100% - 1px), 100% calc(100% - 2px);
    transition: 1s, background-position 1s 1s;
    transform: translateY(0);
  }
}
    <div class="slogan">
  <h2>
    Your <span class="consumer">consumer-driven</span> web hosting service.
  </h2>
</div>

    From this isolated example, I would personally avoid setting that variable (--d) altogether. It seems overly complicated, though I don't know the constraints you're working under.