{"id":22477,"date":"2013-07-19T20:37:49","date_gmt":"2013-07-20T03:37:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22477"},"modified":"2019-08-12T09:59:56","modified_gmt":"2019-08-12T16:59:56","slug":"transition-delay","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/","title":{"rendered":"transition-delay"},"content":{"rendered":"<p>The <code>transition-delay<\/code> property, normally used as part of <code>transition<\/code> shorthand, is used to define a length of time to delay the start of a transition.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.delay-me {\r\n  transition-delay: 0.25s;\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 e.g. <code>1.3s<\/code> or <code>125ms<\/code><\/li>\n<li>A comma-separated list of time values, for defining separate delay values on multiple transitions for a single element e.g. <code>1s background-color, 350ms transform<\/code><\/li>\n<\/ul>\n<p>The default value for <code>transition-delay<\/code> is <code>0s<\/code>, meaning that no delay will take place and the transition will start to occur immediately. The time value can be expressed as a decimal-based number for more precise timing.<\/p>\n<p>When a transition has a delay value that is negative, it will cause the transition to begin immediately (with no delay), however, the transition will begin partway through the process, as though it had already begun.<\/p>\n<p>The following Pen shows a hover effect on a box that uses a <code>transition-delay<\/code> value of <code>2s<\/code> with a transition duration of <code>1s<\/code>:<\/p>\n<p class=\"codepen\" data-height=\"439\" style=\"height: 439px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"css,result\" data-user=\"css-tricks\" data-slug-hash=\"ZgdOzm\" style=\"height: 439px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Transition delay demo\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/ZgdOzm\/\" rel=\"noopener\"><br \/>\n  Transition delay demo<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>Now compare that to the following demo, which has a delay of <code>-1s<\/code> and a duration of <code>3s<\/code>:<\/p>\n<p class=\"codepen\" data-height=\"439\" style=\"height: 439px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"css,result\" data-user=\"css-tricks\" data-slug-hash=\"JgQKGo\" style=\"height: 439px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Negative transition delay demo\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/team\/css-tricks\/pen\/JgQKGo\/\" rel=\"noopener\"><br \/>\n  Negative transition delay demo<\/a> by CSS-Tricks (<a href=\"https:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<p>Notice that in the second example, only the final two-thirds of the actual transition are visible and there is no delay. The negative value removes the delay and effectively cuts into the duration.<\/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-delay: 500ms;\r\n  -moz-transition-delay: 500ms;\r\n  -o-transition-delay: 500ms;\r\n  transition-delay: 500ms;\r\n}<\/code><\/pre>\n<p>IE10 (the first stable version of IE to support <code>transition-delay<\/code>) does not require the <code>-ms-<\/code> prefix.<\/p>\n<p>A common use case is stagging transitions:<\/p>\n<p class=\"codepen\" data-height=\"389\" style=\"height: 389px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"chriscoyier\" data-slug-hash=\"dxBoKb\" style=\"height: 389px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Staggered Animations\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/dxBoKb\/\" rel=\"noopener\"><br \/>\n  Staggered Animations<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/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-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-delay-property\" rel=\"noopener\">transition-delay on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition-delay\" rel=\"noopener\">transition-delay on MDN<\/a><\/li>\n<li><a href=\"http:\/\/joelb.me\/blog\/2012\/maintaining-css-style-states-using-infinite-transition-delays\/\" rel=\"noopener\">Maintaining CSS Style States using &#8220;Infinite&#8221; Transition Delays<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-transitions\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">5*<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">5.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1*<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">6.0-6.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 125ms A comma-separated list of [&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":[612,4468,727],"acf":[],"jetpack-related-posts":[{"id":14125,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/","url_meta":{"origin":22477,"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":20775,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/shrink-the-admin-bar-expand-on-hover\/","url_meta":{"origin":22477,"position":1},"title":"Shrink the Admin Bar \/ Expand on Hover","date":"March 25, 2013","format":false,"excerpt":"A mini plugin:","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/","url_meta":{"origin":22477,"position":2},"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":22467,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-duration\/","url_meta":{"origin":22477,"position":3},"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":22477,"position":4},"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":15601,"url":"https:\/\/css-tricks.com\/snippets\/css\/useful-css3-less-mixins\/","url_meta":{"origin":22477,"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\/22477"}],"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=22477"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22477\/revisions"}],"predecessor-version":[{"id":294219,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22477\/revisions\/294219"}],"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=22477"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}