Semantic-Org/Semantic-UI · warning

This browser does not support CSS animations

Error message

This browser does not support CSS animations

What it means

Emitted at the top of Transition's animate() (transition.js:170-172) when module.is.supported() returns false — the browser/engine lacks CSS animation support (no Animation API / animationend). Transition becomes a no-op in such an environment. It is a console.error (transition.js:888), not thrown.

Source

Thrown at src/definitions/modules/transition.js:1089

  className   : {
    animating  : 'animating',
    disabled   : 'disabled',
    hidden     : 'hidden',
    inward     : 'in',
    loading    : 'loading',
    looping    : 'looping',
    outward    : 'out',
    transition : 'transition',
    visible    : 'visible'
  },

  // possible errors
  error: {
    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to surpress this warning in production.',
    repeated    : 'That animation is already occurring, cancelling repeated animation',
    method      : 'The method you called is not defined',
    support     : 'This browser does not support CSS animations'
  }

};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

1. Feature-detect CSS animation support before relying on transitions and provide a non-animated fallback.
2. Upgrade the runtime/browser to one with CSS animation support.
3. In tests, use a runner that implements CSS animations or stub the feature.

Example fix

// before
$('#box').transition('fade'); // logs support error in headless env
// after
var supportsAnim = (typeof document.createElement('div').animate === 'function')
  || ('animation' in document.createElement('div').style);
supportsAnim ? $('#box').transition('fade') : $('#box').show();

// Feature-detect CSS animation support and fall back to a plain show/hide.
function cssAnimSupported(){
  var el = document.createElement('div');
  return 'animation' in el.style || typeof el.animate === 'function';
}
cssAnimSupported() ? $('#box').transition('fade') : $('#box').toggle();

When it happens

Trigger: Running transition() in a browser or runtime without CSS animations — a very old browser, a stripped embedded webview, or a headless test runner that does not implement the CSS animation API.

Common situations: Legacy browsers, automated/headless test environments, embedded webviews, CI screenshots.

Related errors

• Caching responses locally requires session storage
• Element is no longer attached to DOM. Unable to animate. Us
• That animation is already occurring, cancelling repeated ani
• The method you called is not defined
• This module requires ui transitions <https://github.com/Sema

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/b857973fd745e459. Report an issue: GitHub.