<input type="checkbox" id="toggle"/> <label for="toggle">Toggle to see animation</label>
<div class="scaled-last"></div>
<div class="scaled-first"></div>
<div class="rotated-first"></div>
<div class="rotated-last"></div>
body {
  background: #121212;
  height: 100vh;
  width: 100vw;
  position: relative;
}
label {
  color:white;
  font-family: sans-serif;
}
div {
  width:20px;
  height:20px;
  margin: 20px;
  background-color:rebeccapurple;
  transition: transform 1s ease;
}
input:checked ~ div {
  transform: translate(0px, 0px) scale(1) rotate(0deg);
}
.scaled-last {
  transform: translate(50px, 0px) scale(2);
}
.scaled-first {
  transform: scale(2) translate(50px, 0px);
}
.rotated-first {
  background-color: #2288ff;
  transform: rotate(-22deg) translate(100px, 0px);
}
.rotated-last {
  background-color: #2288ff;
  transform: translate(100px, 0px) rotate(-22deg);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.