Member Avatar for James_43

Hi guys,

Weird (maybe silly) isse with a CSS fade property using the following classes:

/** CSS3 Animations **/

/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/** ------------------------------------------------ */

.fadeIn {

    opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
}

.fadeIn-500ms {

        -webkit-animation-duration:500ms;
        -moz-animation-duration:500ms;
        -o-animation-duration:500ms;
        animation-duration:500ms;

}

.fadeIn-1s {

    -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        -o-animation-duration:1s;
        animation-duration:1s;

}

.fadeIn-1500ms {

        -webkit-animation-duration:150ms;
        -moz-animation-duration:150ms;
        -o-animation-duration:150ms;
        animation-duration:150ms;

}

.fadeIn-2s {

        -webkit-animation-duration:2s;
        -moz-animation-duration:2s;
        -o-animation-duration:2s;
        animation-duration:2s;

}

.fadeIn-2500ms {

        -webkit-animation-duration:250ms;
        -moz-animation-duration:250ms;
        -o-animation-duration:250ms;
        animation-duration:250ms;

}

.fadeIn-3s {

        -webkit-animation-duration:3s;
        -moz-animation-duration:3s;
        -o-animation-duration:3s;
        animation-duration:3s;

}

.fadeIn-delay-1s {

        -webkit-animation-delay:1s;
        -moz-animation-delay:1s;
        -o-animation-delay:1s;
        animation-delay:1s;
}

.fadeIn-delay-1500ms {

        -webkit-animation-delay:150ms;
        -moz-animation-delay:150ms;
        -o-animation-delay:150ms;
        animation-delay:150ms;
}

.fadeIn-delay-2s {

        -webkit-animation-delay:2s;
        -moz-animation-delay:2s;
        -o-animation-delay:2s;
        animation-delay:2s;
}

.fadeIn-delay-2500ms {

        -webkit-animation-delay:250ms;
        -moz-animation-delay:250ms;
        -o-animation-delay:250ms;
        animation-delay:250ms;
}

.fadeIn-delay-3s {

        -webkit-animation-delay:3s;
        -moz-animation-delay:3s;
        -o-animation-delay:3s;
        animation-delay:3s;
}

And those are used within my HTML as below:

<div id="img-menu" class="menu-practioner-container fadeIn fadeIn-1s" >
        <ul class="menu header-links">
            <li class="header-autism fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#whatwedo">What we do<span ><img src="" /></span></a></li>
            <li class="header-autism fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#email">Facebook<span><img src="" /></span></a></li>
            <li class="header-email-us fadeIn fadeIn-1s fadeIn-delay-1500ms"><a data-toggle="modal" data-target="#email">Free Quotation</a></li>
        </ul>
</div>

The problem is that my code is not recognising the values of split seconds, in this case, the 1500ms value. instead, they are assuming the 1s value of the div above. When I change the 1500ms to a whole value, e.g. 2s, it works fine.

Googling the issue turns up no issues, and I see people use miliseconds in online examples, so I can't figure out what this issue is!

`

  • 2 Contributors
  • 1 Reply
  • 274 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by pacav69

Dani AI

Generated

— quick read of the posted CSS shows the actual cause: the classes named for "1500ms" and "2500ms" contain typos (they set 150ms and 250ms), so the browser is not getting the intended 1.5s/2.5s values. is correct that 1.5s and 1500ms are equivalent, but the behaviour here is coming from a simple numeric typo and not from a limitation of milliseconds.

A cleaner, more maintainable pattern is to set the base animation once and then override duration/delay with small utility classes. Example style (different class names than the thread to avoid repeating the original blocks):

/* base */
.anim {
  opacity: 0;
  animation-name: fadeIn;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* overrides */
.dur-1500 { animation-duration: 1.5s; }
.delay-1500 { animation-delay: 1.5s; }

Troubleshooting checklist:

  • Verify the numeric values in CSS (150 vs 1500) — the posted classes show 150/250 instead of 1500/2500.
  • Inspect the element in DevTools (Computed tab) to see the active animation-duration and animation-delay.
  • Check cascade/order: later rules or other framework CSS can override the small utility classes.
  • Ensure the element is visible when the animation runs (animations won’t run on display:none).
  • Prefer consistent units (decimal seconds like 1.5s are clearer) and keep the unprefixed property last (modern browsers do not require vendor prefixes).

Correcting the millisecond typos (or switching to 1.5s) and confirming with DevTools will resolve the observed behavior.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.