{"id":22472,"date":"2013-07-19T20:16:22","date_gmt":"2013-07-20T03:16:22","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22472"},"modified":"2013-07-19T21:05:20","modified_gmt":"2013-07-20T04:05:20","slug":"transition-timing-function","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-timing-function\/","title":{"rendered":"transition-timing-function"},"content":{"rendered":"<p>The <code>transition-timing-function<\/code> property, normally used as part of <code>transition<\/code> 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.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    transition-timing-function: ease-out;\r\n}<\/code><\/pre>\n<p>These timing functions are commonly called <em>easing functions<\/em>, and can be defined using a predefined keyword value, a stepping function, or a cubic B\u00e9zier curve.<\/p>\n<p>The predefined keyword values allowed are:<\/p>\n<ul>\n<li>ease<\/li>\n<li>linear<\/li>\n<li>ease-in<\/li>\n<li>ease-out<\/li>\n<li>ease-in-out<\/li>\n<li>step-start<\/li>\n<li>step-end<\/li>\n<\/ul>\n<p>For some values, the effect may not be as obvious unless the transition duration is set to a larger value.<\/p>\n<p>Each of the predefined keywords has an equivalent cubic B\u00e9zier curve value or equivalent stepping function value. For example, the following two timing function values would be equivalent to each other:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    transition-timing-function: ease-out;\r\n}\r\n\r\n.example-2 {\r\n    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);\r\n}<\/code><\/pre>\n<p>As would the following two:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.example {\r\n    transition-timing-function: step-start;\r\n}\r\n\r\n.example-2 {\r\n    transition-timing-function: steps(1, start);\r\n}<\/code><\/pre>\n<h2>Using steps() and B\u00e9zier curves<\/h2>\n<p>The <code>steps()<\/code> function allows you to specify intervals for the timing function. It takes one or two parameters, separated by a comma: a positive integer and an optional value of either <code>start<\/code> or <code>end<\/code>. If no second parameter is included, it will default to <code>end<\/code>.<\/p>\n<p>To understand stepping functions, here is a demo that uses <code>steps(4, start)<\/code> for the box on the left, and <code>steps(4, end)<\/code> for the box on the right (hover over a box or reload the frame to view the transitions):<\/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=\"yBChk\" data-user=\"impressivewebs\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/impressivewebs\/pen\/yBChk\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p><script async src=\"http:\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>When <code>start<\/code> is specified, the change of values occurs at the start of each interval, while <code>end<\/code> causes the change of values to occur at the end of each interval.<\/p>\n<p>A detailed look at B\u00e9zier curve values is beyond the scope of this reference, however see the references in the related links section for tools that demonstrate visually how these values work.<\/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-timing-function: ease-in-out;\r\n    -moz-transition-timing-function: ease-in-out;\r\n    -o-transition-timing-function: ease-in-out;\r\n    transition-timing-function: ease-in-out;\r\n}<\/code><\/pre>\n<p>IE10 (the first stable version of IE to support <code>transition-timing-function<\/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-duration<\/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-timing-function-property\" rel=\"noopener\">transition-timing-function on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition-timing-function\" rel=\"noopener\">transition-timing-function on MDN<\/a><\/li>\n<li><a href=\"http:\/\/www.the-art-of-web.com\/css\/timing-function\/\" rel=\"noopener\">Visualizing transition timings<\/a><\/li>\n<li><a href=\"http:\/\/cubic-bezier.com\/\" rel=\"noopener\">cubic-bezier.com<\/a> by Lea Verou<\/li>\n<li><a href=\"http:\/\/www.roblaplaca.com\/examples\/bezierBuilder\/\" rel=\"noopener\">CSS cubic Bezier builder<\/a> by Rob La Placa<\/li>\n<li><a href=\"http:\/\/www.css3beziercurve.net\/\" rel=\"noopener\">CSS3 Bezier Curve Tester<\/a> by Michael Gotta<\/li>\n<li><a href=\"http:\/\/matthewlein.com\/ceaser\/\" rel=\"noopener\">Ceaser<\/a> by Matthew Lein<\/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-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 be defined using a predefined [&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":22472,"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":196304,"url":"https:\/\/css-tricks.com\/snippets\/sass\/easing-map-get-function\/","url_meta":{"origin":22472,"position":1},"title":"Easing Map Get Function","date":"February 19, 2015","format":false,"excerpt":"B\u00e9zier curves can be used to add beautiful effects to CSS transitions and animations. Typing out the full functional notation (e.g. cubic-bezier(0.550, 0.085, 0.680, 0.530)) - for developers writing Sass, is unnecessary. Bourbon - a popular Sass mixin library, comes pre-packaged with all of the timing functions declared as variables.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-property\/","url_meta":{"origin":22472,"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":22472,"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":22477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition-delay\/","url_meta":{"origin":22472,"position":4},"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":13714,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/","url_meta":{"origin":22472,"position":5},"title":"animation","date":"August 20, 2011","format":false,"excerpt":"The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: .element { animation: pulse 5s infinite; } @keyframes pulse\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22472"}],"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=22472"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22472\/revisions"}],"predecessor-version":[{"id":22484,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22472\/revisions\/22484"}],"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=22472"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}