Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/css/@media/-webkit-transition/index.md
6519 views
---
title: "-webkit-transition"
slug: Web/CSS/@media/-webkit-transition
page-type: css-media-feature
status:
  - deprecated
  - non-standard
browser-compat: css.at-rules.media.-webkit-transition
---

{{CSSRef}} {{deprecated_header}} {{ Non-standard_header }}

Note: All browsers support the transition property without vendor prefixes. Only WebKit (Safari), and not Chromium, based browsers support the -webkit-transition media feature. No browsers support transition without the prefix as a media query (though some browsers do support - {{cssxref("@media/-webkit-transform-3d", "-webkit-transform-3d")}}). Use the @supports (transition) feature query instead.

The -webkit-transition Boolean non-standardCSS media feature is a WebKit extension whose value is true if the browsing context supports CSS transitions.

Apple has a description in Safari CSS Reference; this is now called transition there.

Note: You should not use this media feature; it was never specified, has never been widely implemented, and has been removed from most browsers. Use a {{cssxref("@supports")}} feature query instead.

Syntax

@media (-webkit-transition) {
  /* CSS to use if this media feature and prefixed transitions are supported */
}

Examples

Use @supports instead

Do not use the -webkit-transition media feature. Instead, test for transition support using the CSS {{cssxref("@supports")}} at-rule, like this:

@supports (transition: initial) {
  /* CSS to use if transitions are supported */
}

Obsolete example

Before this became obsolete, you could use -webkit-transition in your CSS like this:

@media (-webkit-transition) {
  /* CSS to use if transitions are supported */
}

Specifications

Not part of any standard.

Browser compatibility

{{Compat}}

See also