{"id":178,"date":"2011-09-13T01:01:48","date_gmt":"2011-09-13T06:01:48","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=178"},"modified":"2014-10-09T22:39:09","modified_gmt":"2014-10-10T03:39:09","slug":"bouncing-along-css3-animation","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/bouncing-along-css3-animation\/","title":{"rendered":"Bouncing Along: CSS3 Animation"},"content":{"rendered":"<p>CSS3 allows for several easing effects when you animate or transition an element: linear, ease, ease-in, ease-out, and ease-in-out. You can also specify custom easing with\u00a0cubic-bezier (and here&#8217;s a <a href=\"http:\/\/matthewlein.com\/ceaser\/\">great tool<\/a> for doing that).<\/p>\r\n\r\n<p>Unfortunately, there&#8217;s no way to specify more complicated motions, such as the bounce easing in\u00a0jQuery UI (see\u00a0<a href=\"http:\/\/jqueryui.com\/demos\/effect\/#easing\">easeOutBounce<\/a>). To recreate that effect in CSS3, we&#8217;ll have to create custom animation keyframes. I used a <a href=\"http:\/\/james.padolsey.com\/demos\/jquery\/easing\/\">graph<\/a>\u00a0of the jQuery effect to estimate my keyframes:<\/p>\r\n<ul>\r\n\t<li>(time \u2013 position)<\/li>\r\n\t<li>0 \u2013 0<\/li>\r\n\t<li>37 \u2013 100<\/li>\r\n\t<li>55 \u2013 75<\/li>\r\n\t<li>73 \u2013 100<\/li>\r\n\t<li>82 \u2013 93<\/li>\r\n\t<li>91 \u2013 100<\/li>\r\n\t<li>96 \u2013 98<\/li>\r\n\t<li>100 \u2013 100<\/li>\r\n<\/ul>\r\n<p>Which, translated to pixels, gives us the following CSS:<\/p>\r\n<pre class=\"pre\">@keyframes bounce {\r\n    0%   { top:000px; }\r\n    37%  { top:500px; }\r\n    55%  { top:375px; }\r\n    73%  { top:500px; }\r\n    82%  { top:465px; }\r\n    91%  { top:500px; }\r\n    96%  { top:490px; }\r\n    100% { top:500px; }\r\n}<\/pre>\r\n<p>So here&#8217;s our\u00a0<a href=\"http:\/\/cbateman.com\/demos\/bounce\/take1.htm\">first demo<\/a>. The gist of it is there, but it feels pretty choppy; it just doesn&#8217;t have the right gravity. \u00a0The default easing is &#8216;ease&#8217;, and it gets applied to every keyframe \u2013 we need to add specific easing for each keyframe in our animation:<\/p>\r\n<pre class=\"pre\">@keyframes bounce {\r\n    0%   { top:000px; animation-timing-function:ease-in;  }\r\n    37%  { top:500px; animation-timing-function:ease-out; }\r\n    55%  { top:375px; animation-timing-function:ease-in;  }\r\n    73%  { top:500px; animation-timing-function:ease-out; }\r\n    82%  { top:465px; animation-timing-function:ease-in;  }\r\n    91%  { top:500px; animation-timing-function:ease-out; }\r\n    96%  { top:490px; animation-timing-function:ease-in;  }\r\n    100% { top:500px; }\r\n}<\/pre>\r\n<p>The <a href=\"http:\/\/cbateman.com\/demos\/bounce\/take2.htm\">second demo<\/a>\u00a0looks much nicer; you can feel the weight of the box hitting the floor.<\/p>\r\n\r\n<p>The only problem is that you have to manually calculate the pixel values for every keyframe of every element you want to animate. You could save the trouble by creating a JavaScript class to do it for you (I may or may not post an example of that).<\/p>\r\n\r\n<footer><p>Of course, you&#8217;ll need a modern browser to see the demos in action.<\/p><\/footer>","protected":false},"excerpt":{"rendered":"<p>CSS3 allows for several easing effects when you animate or transition an element: linear, ease, ease-in, ease-out, and ease-in-out. You can also specify custom easing with\u00a0cubic-bezier (and here&#8217;s a great tool for doing that). Unfortunately, there&#8217;s no way to specify more complicated motions, such as the bounce easing in\u00a0jQuery UI (see\u00a0easeOutBounce). To recreate that effect in CSS3, we&#8217;ll have to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-178","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/178"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":41,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions"}],"predecessor-version":[{"id":1382,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/178\/revisions\/1382"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}