.outside-square
.inside-square
View Compiled
body
  background-color: #307671
  display: flex
  justify-content: center
  align-items: center
  position: relative
  min-height: 100vh
  width: 100vw
  max-width: 100%
  overflow: hidden
  padding: 0 30px
  
.outside-square,
.inside-square
  position: absolute
  animation: sideBouncing .3s ease-in-out infinite
  
.outside-square
  background-color: #fff
  height: 150px
  width: 150px
  animation-direction: alternate-reverse
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,.3)
  
.inside-square
  background-color: #4A4A4A
  height: 80px
  width: 80px
  animation-direction: alternate
  
@keyframes sideBouncing
  0%
    transform: rotate(-5deg)
  100%
    transform: rotate(5deg)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.