{"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=https://css-tricks.com/"http:////codepen.io//impressivewebs//pen//oDvFk/" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p><script async src=https://css-tricks.com/"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/"https:////css-tricks.com//almanac//properties//t//transition///">transition<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transition-property///">transition-property<\/a><\/li>\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//transition-duration///">transition-timing-function<\/a><\/li>\n<li><a href=https://css-tricks.com/"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=https://css-tricks.com/"http:////www.w3.org//TR//css3-transitions//#transition-duration-property\" rel=\"noopener\">transition-duration on W3C<\/a><\/li>\n<li><a href=https://css-tricks.com/"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. [&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":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_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}]}}