css transition

by ian_smithz

HTML

<div id="wrapper">
	<button id="movebtn">Move</button>
	<div id="container">
		<div class="box d1 active">1</div>
		<div class="box d2 active">2</div>
		<div class="box d3 active">3</div>
		<div class="box d4 active">4</div>
		<div class="box d5 active">5</div>
		<div class="box d6 active">6</div>
		<div class="box d7 active">7</div>
		<div class="box d8 active">8</div>
		<div class="box d9 active">9</div>
		<div class="box d10 active">10</div>
	</div>
</div>

CSS

html,
body {
    height:100%;
    margin:0;
    overflow: hidden;
    width: 100%;
}

#wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    width: 25%;
    height: 25%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box {
  background-color: red;
  border: 2px solid #000000;
  box-sizing: border-box;
  cursor: pointer;
  height: 25%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition-duration: 600ms;
}
.box.active {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.d1 {
  width: 50%;
  top: 0;
  left: 0;
  transform: translate(-100%, -300%);
}


.d2 {
  width: 50%;
  top: 0;
  left: 50%;
  transform: translate(100%, -300%);
}

.d3 {
    width: 25%;
    top: 25%;
    left: 0;
    transform: translate(-400%, -100%);
}

.d4 {
    width: 25%;
    top: 25%;
    left: 25%;
    transform: translate(-400%, -100%);
}

.d5 {
    width: 25%;
    top: 25%;
    left: 50%;
    transform: translate(400%, -100%);
}

.d6 {
    width: 25%;
    top: 25%;
    left: 75%;
    transform: translate(400%, -100%);
}

.d7 {
    width: 50%;
    top: 50%;
    left: 0;
    transform: translate(-200%, 100%);
}

.d8 {
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(200%, 100%);
}

.d9 {
    width: 50%;
    top: 75%;
    left: 0;
    transform: translate(-100%, 300%);
}

.d10 {
    width: 50%;
    top: 75%;
    left: 50%;
    transform: translate(100%, 300%);
}

JavaScript

$( "#movebtn" ).on('click', function() {
    $('.box').toggleClass('active')
});