*{margin: 0;padding: 0;}
.container{position:relative;margin: 100px auto; width: 400px;height: 400px;border:1px solid #ccc;border-radius:10px;}
.attack{position:absolute;left: 50%;margin-left: -50px;width: 100px;height: 100px;-webkit-animation:go .9s linear infinite;}
.attack::before{content:'';position:absolute;width: 100%;height: 100%;-webkit-animation:spin 1.8s linear infinite;background-color:#37acf4}
.defense{position:relative;margin-top: 250px;color:#cfcfc5;font-size: 38px;font-family: Segoe UI;text-align: center;}
.defense::before{display: inline-block;content:attr(data-before);transform-origin:left bottom;-webkit-animation:txtLeft 0.9s linear infinite;}
.defense::after{display: inline-block;content:attr(data-after);transform-origin:right bottom;-webkit-animation:txtRight 0.9s linear infinite;}
@keyframes txtLeft{
  50%,85%{transform:rotate(0deg);}
  65%{transform:rotate(6deg);}
  70%{transform:rotate(-3deg);}
  75%{transform:rotate(2deg);}
}
@keyframes txtRight{
  50%,85%{transform:rotate(0deg);}
  65%{transform:rotate(-6deg);}
  70%{transform:rotate(3deg);}
  75%{transform:rotate(-2deg);}
}
@keyframes go{
  0%{transform:translateY(0px);}
  25%{transform:translateY(178px);}
  50%{transform:translateY(0px);}
  75%{width:50px;height:50px}
  100%{width:50px;height:50px}
}
@keyframes spin{
  100%{transform:rotate(-360deg);}
}