*{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);}

}