{"id":22467,"date":"2013-07-19T15:39:00","date_gmt":"2013-07-19T22:39:00","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22467"},"modified":"2013-07-19T20:43:29","modified_gmt":"2013-07-20T03:43:29","slug":"transition-duration","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-duration\/","title":{"rendered":"transition-duration"},"content":{"rendered":"<p>The <code>transition-duration<\/code> property, normally used as part of <code>transition<\/code> 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.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    transition-duration: 3s;\r\n}<\/code><\/pre>\n<p>The value can be one of the following:<\/p>\n<ul>\n<li>A valid time value (defined in seconds or milliseconds)<\/li>\n<li>A comma-separated list of time values, for transitioning multiple properties on a single element<\/li>\n<\/ul>\n<p>The default value for <code>transition-duration<\/code> is <code>0s<\/code>, meaning that no transition will take place and the property change will take place immediately, even if the other transition-related properties are defined. The time value can be expressed as a decimal-based number for more precise timing and negative values are not allowed.<\/p>\n<p>The following CodePen shows a hover effect on a box that uses a <code>transition-duration<\/code> value of <code>1s<\/code> to gradually change the background color:<\/p>\n<pre class=\"codepen\" data-height=\"220\" style=\"height: 220px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"oDvFk\" data-user=\"impressivewebs\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/oDvFk\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p><script async src=\"http:\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/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-duration: 700ms;\r\n    -moz-transition-duration: 700ms;\r\n    -o-transition-duration: 700ms;\r\n    transition-duration: 700ms;\r\n}<\/code><\/pre>\n<p>IE10 (the first stable version of IE to support <code>transition-duration<\/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-property<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-duration\/\">transition-timing-function<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/\">transition-delay<\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-transitions\/#transition-duration-property\" rel=\"noopener\">transition-duration on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition-duration\" rel=\"noopener\">transition-duration 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-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 the following: A valid time [&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":22460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/","url_meta":{"origin":22467,"position":0},"title":"transition-property","date":"July 19, 2013","format":false,"excerpt":"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\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":22467,"position":1},"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":14125,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/","url_meta":{"origin":22467,"position":2},"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":22472,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-timing-function\/","url_meta":{"origin":22467,"position":3},"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":356179,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/rotate\/","url_meta":{"origin":22467,"position":4},"title":"rotate","date":"November 8, 2021","format":false,"excerpt":"The rotate property in CSS turns an element around one or more axes. Think of it like poking one or more pins into an element and spinning the element around those points in clockwise and counter-clockwise directions measured in degree, gradian, radian, and turn values. .element { rotate: 45deg; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/css-tricks-favicon-rotate.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":22467,"position":5},"title":"Useful CSS3 Less Mixins","date":"December 16, 2011","format":false,"excerpt":".text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0,\u2026","rel":"","context":"With 51 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22467"}],"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=22467"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22467\/revisions"}],"predecessor-version":[{"id":22483,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22467\/revisions\/22483"}],"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=22467"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}