How To Create CSS3 Modal Box Bounce And Minimise Animation

by 1 04/30/2012

In this tutorial we are going to create a modal box which will open by bouncing on to the screen and then when you close the box it will minimise out of sight.

To do this we are going to use new CSS3 features of 3D transforms, which means that it’s not going to be supported on all browsers. To get the best experience  you will need to use the latest webkit browsers so Chrome or Safari. You can also view these CSS3 3D transforms in the latest version of Firefox.

As we are limited to what you see in different browsers we are still going to use transition animation so in older browsers you will see a fade-in and fade-out effect instead of a bounce. Also worth noting is that IE users will just see it open and close.

CSS-Bounce-And-Minimise-Animation-Demo-590x199

View the Demo Here

The HTML

Lets start with the HTML, we are going to create a button to open the modal box, this button will be a link to open the modal box ID.

The modal box is going to be a div and have text and another link inside.

Open modal

That’s all we need in the HTML for now, next for the CSS to do all the work.

The CSS

To start off we are going to position and style the modal box we don’t need to worry about the animation for now lets just get it looking as we want on the page.

/*Position and set the opacity of the modal box*/
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
opacity: 0;
pointer-events: none;

/*Set the opacity transition will be used by older browsers that don't support 3D transforms*/
-webkit-transition:opacity 500ms ease-in;
   -moz-transition:opacity 500ms ease-in;
     -o-transition:opacity 500ms ease-in;
        transition:opacity 500ms ease-in;
}

/*Styling the inner box of the modal box*/
.modal div {
width: 50%;
background: #fff;
position: relative;
margin: 10% auto;
box-shadow: 0px 2px 5px #222;
-moz-box-shadow: 0px 2px 5px #222;
-webkit-box-shadow: 0px 2px 5px #222;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#f2f2f2;
padding:25px;

/* Set the default animation*/
-webkit-animation:minimise 500ms linear;
   -moz-animation:minimise 500ms linear;
    -ms-animation:minimise 500ms linear;
     -o-animation:minimise 500ms linear;
        animation:minimise 500ms linear;
}

/*Style the header of the modal box*/
.modal h2 {
     font-size: 2em;
     padding:10px 0;
     text-align:center;
}

/*Style the close button inside the box*/
.close{
     text-align: center;
     display:block;
     color:#FF4444;
     font-size:12px;
}

That’s all we need to create the look of the modal box as you can see we have added a default animation setting of minimise to the inner div of the modal box. We will create this animation setting later in the tutorial.

You will notice from the link button and the close button we are linking to an #open and #close which means this will go into the URL, from this setting we can then use the :target selector to style the modal box.

Add the following to the CSS to change the default animation when you click the open button.

.modal:target {
     opacity: 1;
     pointer-events: auto;
}

.modal:target > div {
-webkit-animation-name:bounce;
   -moz-animation-name:bounce;
    -ms-animation-name:bounce;
     -o-animation-name:bounce;
        animation-name:bounce;
}

The above styles will be applied when we have clicked on the open link.

Now we can create the animation for the bounce and the minimise effect.

CSS Bounce Animation

Add the following to your CSS file to create a bounce effect.

/*Setup the bounce animation*/
@-webkit-keyframes bounce {
  0% {
    /*transform*/
	-webkit-transform:scale3d(0.1,0.1,1);
	   -moz-transform:scale3d(0.1,0.1,1);
	    -ms-transform:scale3d(0.1,0.1,1);
	     -o-transform:scale3d(0.1,0.1,1);
	        transform:scale3d(0.1,0.1,1);
        -webkit-box-shadow:0 3px 20px rgba(0,0,0,0.9);
           -moz-box-shadow:0 3px 20px rgba(0,0,0,0.9);
            -ms-box-shadow:0 3px 20px rgba(0,0,0,0.9);
   	     -o-box-shadow:0 3px 20px rgba(0,0,0,0.9);
                box-shadow:0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    -moz-transform: scale3d(1.08,1.08,1);
    -ms-transform: scale3d(1.08,1.08,1);
    -o-transform: scale3d(1.08,1.08,1);
    transform: scale3d(1.08,1.08,1);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0);
    -ms-box-shadow: 0 10px 20px rgba(0,0,0,0);
    -o-box-shadow: 0 10px 20px rgba(0,0,0,0);
    box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    -moz-transform: scale3d(0.95,0.95,1);
    -ms-transform: scale3d(0.95,0.95,1);
    -o-transform: scale3d(0.95,0.95,1);
    transform: scale3d(0.95,0.95,1);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    -moz-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    -o-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    -ms-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    -o-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

CSS Minimise Animation

Now the CSS minimise animation.

/*Setup the minimise animation*/
@-webkit-keyframes minimise {
  0% {
    -webkit-transform: scale3d(1,1,1);
    -moz-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    -o-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
  }
  100% {
    -webkit-transform: scale3d(0.1,0.1,1);
    -moz-transform: scale3d(0.1,0.1,1);
    -ms-transform: scale3d(0.1,0.1,1);
    -o-transform: scale3d(0.1,0.1,1);
    transform: scale3d(0.1,0.1,1);
  }
}

That’s it. View the demo and give it a go.

View the Demo Here

About 

Paul Underwood is a Web Developer who writes Web Development tutorials and snippets about WordPress, PHP, jQuery and CSS3. To view more tutorials visit his blog Paulund.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT

Ronald

Hi there,

Amazing tutorial. Any way we can do this by hovering instead of clicking the link ?

June 17, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>