{"id":27488,"date":"2016-08-01T21:01:15","date_gmt":"2016-08-01T13:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27488"},"modified":"2023-04-06T19:01:53","modified_gmt":"2023-04-06T11:01:53","slug":"css3-fan-out-bounce-effect-animation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-fan-out-bounce-effect-animation\/","title":{"rendered":"Create a Fan-Out with Bounce Effect Using CSS3 Animation"},"content":{"rendered":"

Did you know that geometric transformations<\/strong> added to HTML elements with the transform<\/a><\/code>CSS property such as scale, skew, and rotate can be animated<\/strong>? They can be animated using the transition<\/a><\/code> property and @keyframes<\/a><\/code> animations, but what\u2019s even cooler is that animated transformations can be taken up a notch with the addition of a little bounce effect<\/strong>, using the cubic-bezier()<\/a><\/code> timing function.<\/p>\n

In a nutshell, cubic-bezier()<\/code> (in CSS) is a timing function<\/a> for transitions<\/strong>. It specifies the speed of the transition, and among other things, it can be also used to create bouncing effect in animations<\/strong>.<\/p>\n

In this post, first we\u2019re going to create a simple transformation animation<\/strong> to which we later add a cubic-bezier()<\/code> timing function<\/strong>. At the end of this tutorial, you\u2019ll understand how to create an animation that uses both a fan-out and a bounce effect<\/strong>. Here is the final result (click to see effect).<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Look Into: Cubic-bezier in CSS3 Transition<\/a>\n\t\t\t\t<\/p>\n