CSS3 Animation – Creating a Fan-Out With Bounce Effect Using Bezier Curve

Did we know that geometric transformations combined to HTML elements with a transformCSS skill such as scale, skew, and stagger can be animated? They can be charcterised regulating a transition skill and @keyframes animations, nonetheless what’s even cooler is that charcterised transformations can be taken adult a nick with a further of a small bounce effect, regulating a cubic-bezier() timing function.

A Look Into: Cubic-bezier in CSS3 Transition

A Look Into: Cubic-bezier in CSS3 Transition

[series_html5css3] CSS3 Transition is one of a good additions in CSS3. It allows us to request transitory changing…

Read more

In a nutshell, cubic-bezier() (in CSS) is a timing function for transitions. It specifies a speed of a transition, and among other things, it can be also used to create bouncing outcome in animations.

In this post, initial we’re going to create a elementary mutation animation to that we after add a cubic-bezier() timing function. At a finish of this tutorial, you’ll know how to emanate an animation that uses both a fan-out and a rebound effect. Here is a final outcome (click to see effect).

 

The demo is desirous by this pleasing Dribbble shot by Christopher Jones about an charcterised plcae marker.

Dribbble Shot

IMAGE: Dribble
1. Creating a leaves

The figure of a plcae pen is done adult of 5 (let’s call them) leaves. To emanate a oval shape of a leaf, let’s use a border-radius CSS property. The border-radius of a singular dilemma is made adult of dual radii, plane and vertical, like shown below.

Border Radius Diagram

IMAGE: W3C

The border-radius skill has many opposite syntaxes. We will use a some-more difficult one for a figure of a marker:

border-radius: htl htr hbr hbl / vtl vtr vbr vbl;

In this syntax, plane and straight radii are grouped together; h v paint plane straight radii, and t, l, b r paint top, left, bottom right corners. For instance, vbl stands for a straight radius of a bottom-left corner.

If we give only one value for possibly a plane or a straight side, that value will be copied to all a other plane or straight radii by a browser.

To create a straight oval shape, keep a plane radii during 50% for all corners, and adjust a straight ones, compartment a preferred figure is seen. The horizontal side will use usually one value: 50%.

The vertical radii of a top-left and top-right corners will be 30%, while a bottom-left and bottom-right corners will use a 70% value.

HTML

div class="pinStarLeaf"/div

CSS

.pinStarLeaf {
  width: 60px;
  height: 120px;
  border-radius: 50%/30% 30% 70% 70%;
  background-color: 
}
Marker Shape

IMAGE: The figure of a pen (vertical oval)
2. Multiplying a leaves

Since a pen will fan out display 5 leaves, we emanate four some-more copies of a leaf in opposite colors, and with absolute positioning in sequence to smoke-stack them on any other.

HTML

div id="pinStarWrapper"
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
/div

CSS

#pinStarWrapper{
  width: 300px;
  height: 300px;
  position: relative;
}
.pinStarLeaf{
    width: 60px;
    height: 120px;
    position: absolute;
    border-radius: 50%/30% 30% 70% 70% ;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: .5;
}
.pinStarLeaf:nth-of-type(1){
  background-color: 
}
.pinStarLeaf:nth-of-type(2){
  background-color: 
}
.pinStarLeaf:nth-of-type(3){
  background-color: 
}
.pinStarLeaf:nth-of-type(4){
  background-color: 
}
.pinStarLeaf:nth-of-type(5){
  background-color: 
}
3. Capturing Click Event Improving Aesthetics

Let’s add a checkbox with a #pinStarCenterChkBox identifier to constraint a click event. When a checkbox is checked, a leaves will fan out (rotate). We also need to supplement a white circle with a #pinStarCenter identifier for aesthetics. It will be positioned on tip of a marker, and it will be a core square of a plcae marker.

HTML

We place a checkbox before, and a white round after, a leaves:

div id="pinStarWrapper"
  submit type="checkbox" id="pinStarCenterChkBox"
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div class="pinStarLeaf"/div
  div id="pinStarCenter"/div
/div

CSS

First, we set a simple styles for a checkbox and a covering circle:

#pinStarCenter, #pinStarCenterChkBox{
    width: 45px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    bottom: 0;
    margin: auto;
    background-color: 
    border-radius: 50%;
    cursor: pointer;
}
#pinStarCenter, .pinStarLeaf{
  pointer-events: none;
}
#pinStarCenter  input[type="checkbox"]{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

As any root will stagger along a z-axis in opposite angles, we need to set a transform: rotatez(); skill accordingly, to create a star shape. We also request a transition skill for a revolution effect (more precisely we use a transition: renovate 1s linear order for a leaves).

#pinStarCenterChkBox:checked ~ .pinStarLeaf{
    transition: renovate 1s linear;
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5){
    transform: rotatez(35deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4){
    transform: rotatez(105deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3){
    transform: rotatez(180deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2){
    transform: rotatez(255deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1){
    transform: rotatez(325deg);
}

If we have a demeanour during a CSS above, we can see from a participation of a #pinStarCenterChkBox:checked ~ general kin selector that we usually supplement a transition and transform properties when a checkbox is checked (when a user clicked a marker).

4. Modifying a Center of a Rotation

By default, a core of a revolution is positioned in a core of a rotated element, in a case, during a core of a leaves. We need to pierce a core of a mutation to a middle finish of a leaves. We can do this by regulating a transform-origin CSS skill that changes a position of remade elements.

To make a revolution outcome work properly, let’s supplement a dual following manners to a .pinStarLeaf selector in a CSS file:

.pinStarLeaf{
    transform-origin: 30px 30px;
    transition: renovate 1s linear;
}

Let’s see a fan out animation in movement — during this point, but a rebound outcome yet. Click on a white circle, on tip of a marker.

 

Understanding How ubic-Bezier() Works

Now, to supplement a rebound effect, we need to reinstate a linear timing function with cubic-bezier() in a transition declarations in a CSS file.

But first, let’s know a logic behind a cubic-bezier() timing function so that we can simply make clarity of a rebound effect.

The syntax for a cubic-bezier() duty is a following, d and t are distance and time, and their values typically operation between 0 and 1:

cubic-bezier (t1, d1, t2, d2)

Even nonetheless explaining CSS cubic-bezier() in terms of stretch and time isn’t accurate, it’s a lot easier to know it this way.

Assume there’s a box that moves from indicate A to B in 6 seconds. Let’s use a following cubic-bezier() timing duty for a transition with a t1 = 0 and d1 = 1 values.

/* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */
cubic-bezier(0,1,0,0)

In roughly no time, a box moves from A to mid-point, and takes a rest of a time reaching B.

 

Let’s try a same transition with values t1 = 1 and d1 = 0.

/* t1 = 1 , d1 = 0, t2 = 0, d2 = 0 */
cubic-bezier(1,0,0,0)

For a initial 3 seconds, a box doesn’t pierce much, and after it roughly jumps to mid-point, and starts relocating usually towards B.

 

As we can see, d1 controls a distance between A a mid-point, and t1 a time it takes to strech a mid-point from A.

Let’s use d2 and t2 now. Both t1 and d1 will be 1, and t2 = 1 and d2 = 0.

/* t1 = 1 , d1 = 1, t2 = 0, d2 = 1 */
cubic-bezier(1,1,0,1)

The box moves roughly median in 3 seconds (due to t1 = 1, d1 = 1), and in no time it jumps to indicate B.

 

The final instance swaps a prior values of t2 and d2:

/* t1 = 1 , d1 = 1, t2 = 1, d2 = 0 */
cubic-bezier(1,1,1,0)

The box moves roughly median in 3 seconds (due to t1 = 1, d1 = 1), afterwards for 3 some-more seconds doesn’t pierce most before jumping to indicate B.

 

These examples uncover that d2 and t2 control a stretch and time it takes a box to go from mid-point to indicate B.

Although we substantially didn’t need this prolonged (yet sparse) reason of cubic-bezier() during this point, we consider it will assistance we know this duty better. Now, where does a rebound come in all of this?

5. Adding a Bounce Effect with Cubic-Bezier()

The key parameters for a rebound outcome are a distances, d1 and d2. A d1 value of less than 1 takes a box behind indicate A before move towards B during a commencement of animation.

A d2 value of more than 1 takes a box beyond indicate B before entrance behind to rest during B during a finish of animation. Hence a behind and onward rebound effect.

I’ll now supplement a cubic-bezier() values directly to a demo in place of a former linear value of a transition property, and let we see a results.

#pinStarCenterChkBox:checked ~ .pinStarLeaf{
    transition: renovate 1s cubic-bezier(.8,-.5,.2,1.4);
}

Here’s a final result, a CSS-only fan-out animation with a rebound effect:

 

For comparison and to know a rebound outcome better, here is how a cubic-bezier() value of a animation behaves when the practical to a instance box:

 

Add Comment