css animate

Link:  https://css-tricks.com/almanac/properties/t/transform/

<div class="element">

</div>

<div class="element">

</div>

<div class="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;

  animation: skew 3s infinite;

  transform: skew(20deg);

  animation-direction: alternate;

  opacity: .7;

}

@keyframes skew {

  0% {

    transform: skewX(20deg);

  }

  100% {

    transform: skewX(-20deg);

  }

}

body, html {

  height: 100%;

}

body {

  display: flex;

  align-items: center;

  justify-content: center;

}

/****************************/

.element {

  display: inline-block;

  background-color: #aaaaaa;

  height: 100px;

  width: 100px;

  transform: skew(20deg);

  font-size: 1px;

  padding: 1px;

  color: white;

  margin-right: 5px;

  margin-left: 5px;

  animation: shake 2s infinite;

  animation-direction: alternate;

}

@keyframes shake {

  0% {

    transform: skewY(20deg);

  }

  100% {

    transform: skewY(-20deg);

  }

}

body, html {

  height: 100%;

}

body {

  display: flex;

  align-items: center;

  justify-content: center;

}

/**********************************/

.element {

  display: inline-block;

  background: linear-gradient(180deg,#ff8a00,#e52e71);

  height: 100px;

  width: 100px;

  font-size: 1px;

  padding: 1px;

  color: white;

  margin-right: 5px;

  margin-left: 5px;

  animation: skew 3s infinite;

  transform: skew(20deg);

  animation-direction: alternate;

  opacity: .7;

}

@keyframes skew {

  0% {

    transform: skew(20deg, 20deg);

  }

  100% {

    transform: skew(-20deg, -20deg);

  }

}

body, html {

  height: 100%;

}

body {

  display: flex;

  align-items: center;

  justify-content: center;

}