Submit Feedback
Legacy Knowledge Base
Published Jul. 2, 2025

Runtime CSS minifier creates invalid CSS animation action

Written By

Gábor Komáromi

How To articles are not official guidelines or officially supporteddocumentation. They are community-contributed content and may not alwaysreflect the latest updates to Liferay DXP. We welcome your feedback toimprove How to articles!

While we make every effort to ensure this Knowledge Base is accurate, itmay not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with anyfeedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack"publication program, made available for informational purposes. Articlesin this program were published without a requirement for independentediting or verification and are provided "as is" withoutguarantee.

Before using any information from this article, independently verify itssuitability for your situation and project.

Issue

  •  transition: background-color 5000s ease-in-out 0s;
    becomes
     transition: background-color 5000s ease-in-out 0;
    when minification is used.
  • At build time, the CSS gets compiled, but at the run time, when deployed into Liferay, the output depends on whether the minifier is used:
    • Without minifier, the action stays unchanged and works in a browser.
    • With minifier, the time action '0s' is changed into '0', which is invalid.

Environment

  • DXP 7.0+

Resolution

  • Some browsers assume that the final property is not a time value, they will leave the 's' out of the minified CSS.
  • Using keyframes can be a solution in this case, as mentioned in this article.
  • Another workaround could be if we change the 0s value to 1ms.
Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?