{"id":22460,"date":"2013-07-19T14:47:01","date_gmt":"2013-07-19T21:47:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22460"},"modified":"2013-07-19T20:41:45","modified_gmt":"2013-07-20T03:41:45","slug":"transition-property","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/","title":{"rendered":"transition-property"},"content":{"rendered":"<p>The <code>transition-property<\/code> property, normally used as part of <code>transition<\/code> shorthand, is used to define what property, or properties, you want to apply a transition effect to.<\/p>\n<p>This is done by providing the name of the property as the value:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    transition-property: color;\r\n}<\/code><\/pre>\n<p>The value can be one of the following:<\/p>\n<ul>\n<li>A single property name, as in the example above<\/li>\n<li>A comma-separated list of property names (shorthand or longhand), for transitioning multiple properties on a single element<\/li>\n<li>The keyword <code>none<\/code>, which indicates that no property will transition<\/li>\n<li>The keyword <code>all<\/code>, which indicates that all properties will transition (the default)<\/li>\n<\/ul>\n<p>When comma separating the values, the property names are essentially mapped to the other transition properties defined (<code>transition-timing-function<\/code>, <code>transition-duration<\/code>, and <code>transition-delay<\/code>). So this means if a comma-separated list of properties includes one or more property names that are invalid, the other properties will still transition, and will map to their intended related transition properties.<\/p>\n<p>The spec describes this by saying:<\/p>\n<blockquote><p>\u201c[U]nrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.\u201d<\/p><\/blockquote>\n<p>When using a value of <code>none<\/code> or the universal keywords <code>inherit<\/code> or <code>initial<\/code>, these values cannot be used as part of a comma-separated list, otherwise this will result in a syntax error and the entire line will be ignored.<\/p>\n<p>For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    -webkit-transition-property: color;\r\n    -moz-transition-property: color;\r\n    -o-transition-property: color;\r\n    transition-property: color;\r\n}<\/code><\/pre>\n<p>IE10 (the first stable version of IE to support <code>transition-property<\/code>) does not require the <code>-ms-<\/code> prefix.<\/p>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/\">transition<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/\">transition-delay<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-timing-function\/\">transition-timing-function<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-duration\/\">transition-duration<\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/#transition-property-property\" rel=\"noopener\">transition-property on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition-property\" rel=\"noopener\">transition-property on MDN<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">10.5+<\/td>\n<td class=\"yep\">10+<\/td>\n<td class=\"yep\">2.1+<\/td>\n<td class=\"yep\">3.2+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The transition-property property, normally used as part of transition shorthand, is used to define what property, or properties, you want to apply a transition effect to. This is done by providing the name of the property as the value: .example { transition-property: color; } The value can be one of the following: A single property [&hellip;]<\/p>\n","protected":false},"author":7178,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14125,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/","url_meta":{"origin":22460,"position":0},"title":"transition","date":"September 6, 2011","format":false,"excerpt":"The transition property is a shorthand property used to represent up to four transition-related longhand properties: .element { transition: background-color 0.5s ease; } Syntax transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; Demo transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur\u2026","rel":"","context":"With 58 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22467,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-duration\/","url_meta":{"origin":22460,"position":1},"title":"transition-duration","date":"July 19, 2013","format":false,"excerpt":"The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states. .example { transition-duration: 3s; } The value can be one of\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22472,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-timing-function\/","url_meta":{"origin":22460,"position":2},"title":"transition-timing-function","date":"July 19, 2013","format":false,"excerpt":"The transition-timing-function property, normally used as part of transition shorthand, is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course. .example { transition-timing-function: ease-out; } These timing functions are commonly called easing functions, and can\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/","url_meta":{"origin":22460,"position":3},"title":"transition-delay","date":"July 19, 2013","format":false,"excerpt":"The transition-delay property, normally used as part of transition shorthand, is used to define a length of time to delay the start of a transition. .delay-me { transition-delay: 0.25s; } The value can be one of the following: A valid time value defined in seconds or milliseconds e.g. 1.3s or\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":22460,"position":4},"title":"mask","date":"July 2, 2021","format":false,"excerpt":"The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer. .element { mask: url(mask.png) right bottom \/ 100px repeat-y; } mask is included\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/drama-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","url_meta":{"origin":22460,"position":5},"title":"scale","date":"November 10, 2021","format":false,"excerpt":"The scale property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22460"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=22460"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22460\/revisions"}],"predecessor-version":[{"id":22481,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22460\/revisions\/22481"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=22460"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}