body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 100px auto;
  min-width: 320px;
}

.element {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #0073b9;
  margin-bottom: 100px;
  position: relative;
  left: 0;
}

.element-1 {
  -webkit-animation: shake 6s infinite;
  animation: shake 6s infinite;
}

.element-2 {
  background-color: #0099CC;
  -webkit-animation: shake-rotate 6s infinite;
  animation: shake-rotate 6s infinite;
}

@-webkit-keyframes shake {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    left: 50px;
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: -50px;
  }
}

@keyframes shake {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    left: 50px;
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: -50px;
  }
}

@-webkit-keyframes shake-rotate {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    left: 50px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: -50px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

@keyframes shake-rotate {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% {
    left: 50px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    left: -50px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}