{"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=https://css-tricks.com/"http:////codepen.io//impressivewebs//pen//yBChk/" 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>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/"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-duration<\/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-timing-function-property\" rel=\"noopener\">transition-timing-function on W3C<\/a><\/li>\n<li><a href=https://css-tricks.com/"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=https://css-tricks.com/"http:////www.the-art-of-web.com//css//timing-function///" rel=\"noopener\">Visualizing transition timings<\/a><\/li>\n<li><a href=https://css-tricks.com/"http:////cubic-bezier.com///" rel=\"noopener\">cubic-bezier.com<\/a> by Lea Verou<\/li>\n<li><a href=https://css-tricks.com/"http:////www.roblaplaca.com//examples//bezierBuilder///" rel=\"noopener\">CSS cubic Bezier builder<\/a> by Rob La Placa<\/li>\n<li><a href=https://css-tricks.com/"http:////www.css3beziercurve.net///" rel=\"noopener\">CSS3 Bezier Curve Tester<\/a> by Michael Gotta<\/li>\n<li><a href=https://css-tricks.com/"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 [&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\/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}]}}