<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<hr>
<div class="y-element">
</div>
<div class="y-element">
</div>
<div class="y-element">
</div>
.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  -webkit-animation: skew 3s infinite;
          animation: skew 3s infinite;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  opacity: .7;
}

@-webkit-keyframes skew {
  0% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
  100% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
  }
}

@keyframes skew {
  0% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
  100% {
    -webkit-transform: skewX(-20deg);
            transform: skewX(-20deg);
  }
}
body, html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* second example */
HTML  CSS   Result
Edit on 
.element {
  display: inline-block;
  background-color: #aaaaaa;
  height: 100px;
  width: 100px;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  -webkit-animation: shake 2s infinite;
          animation: shake 2s infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: skewY(20deg);
            transform: skewY(20deg);
  }
  100% {
    -webkit-transform: skewY(-20deg);
            transform: skewY(-20deg);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: skewY(20deg);
            transform: skewY(20deg);
  }
  100% {
    -webkit-transform: skewY(-20deg);
            transform: skewY(-20deg);
  }
}
/*  */
.y-element {
  display: inline-block;
  background-color: #aaaaaa;
  height: 100px;
  width: 100px;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  -webkit-animation: shake 2s infinite;
          animation: shake 2s infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: skewY(20deg);
            transform: skewY(20deg);
  }
  100% {
    -webkit-transform: skewY(-20deg);
            transform: skewY(-20deg);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: skewY(20deg);
            transform: skewY(20deg);
  }
  100% {
    -webkit-transform: skewY(-20deg);
            transform: skewY(-20deg);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.