HTML


<div class="outside">
    <div class="inside">
    </div>
</div>


CSS


/* play by:
** @webbeloz
** Pubblic Profile/Members > Registered*
*/
html, body {
  position: relative;
  height:100%;
}
body, webbeloz {
  display:-webkit-flex;
  display:flex;
  margin:0 1%;
  font-size:100%;
  justify-content:space-around;
}
.outside {
    border: 1px solid orange;
    height: 100px;
    width: 100px;
    position: relative;
	align-self:center;
}
.inside {
    border: 1px solid skyblue;
    height: 60px;
    width: 60px;
    margin-top: -31px;
    margin-left: -31px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.outside.animate {
    animation-delay: 0s, .5s, .5s;
    animation-duration: 500ms, 1000ms, 1000ms;
    animation-name: button-bounce, rotate, skyblue;
}
.animate {
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    transform: translateZ(0);
}
.outside.animate .inside {
    animation-delay: .5s, .5s, 1.5s;
    animation-duration: 1000ms, 1000ms, 750ms;
    animation-name: rotate, orange, scale-in;
}
@keyframes scale-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes button-scale-in {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}
@keyframes button-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(.8); }
  50% { transform: scale(1); }
  75% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes orange {
    0% { border: 1px solid orange; }
    99.99% { border: 1px solid orange; }
    100% { border: 1px solid skyblue; }
}
@keyframes skyblue {
    0% { border: 1px solid skyblue; }
    99.99% { border: 1px solid skyblue; }
    100% { border: 1px solid orange; }
}


JS


$(document).ready(function() {
  
  $(document).click(function() {
	var count = 0;
	var jqElement = $('.outside');
	if (!jqElement.hasClass('animate')) {
	  jqElement.addClass('animate');
	  jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
		count++;
		if (count >= 6) {
		  jqElement.off('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd');
		  jqElement.removeClass('animate');
		  }
		});
	  }
	});
});




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now