.container0{
  height:450px;
  width:200px;
  margin: 300px 200px 150px 550px;
  cursor: pointer;
}
@keyframes robotMoves {
from {
  transform: translateY(0px);
}
to {
  transform: translateY(10px);
}
}

@keyframes gearhSpin {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(360deg);
}
}

@keyframes eyesBlink {
10% {
  transform: scaleY(1);
}
11% {
  transform: scaleY(0);
}
12% {
  transform: scaleY(0);
}
13% {
  transform: scaleY(1);
}
}

@keyframes eyesMoves {
10% {
  transform: translateX(0px);
}
13% {
  transform: translateX(-16px);
}
30% {
  transform: translateX(-16px);
}
33% {
  transform: translateX(16px);
}
45% {
  transform: translateX(16px);
}
47% {
  transform: translateX(0px);
}
}

@keyframes antennaMoves {
10% {
  transform: translateX(0px);
}
13% {
  transform: translateX(2px);
}
30% {
  transform: translateX(2px);
}
33% {
  transform: translateX(-20px);
}
45% {
  transform: translateX(-20px);
}
47% {
  transform: translateX(0px);
}
}

.robot {
animation: robotMoves 2s ease-in-out alternate infinite;
}

.robot-arm-left,
.robot-arm-right,
.gear,
.gear-1,
.robot-antenna {
pointer-events: none;
}

.gear {
transform-box: fill-box;
transform-origin: center center;
animation: gearhSpin 3s linear infinite;
}
.gear-1 {
display: none;
transform-box: fill-box;
transform-origin: center center;
transform: translate(-20px, 78px);
}

.robot-eyes > circle {
transform-box: fill-box;
transform-origin: center center;
animation: eyesBlink 2s linear alternate infinite;
}

.robot:hover .robot-eyes {
transform-box: fill-box;
transform-origin: center center;
animation: eyesMoves 5s linear alternate infinite;
}

.robot:hover .robot-antenna {
animation: antennaMoves 5s linear alternate infinite;
}

.robot:hover .gear {
display: none;
}
.robot:hover .gear-1 {
display: inline;
}

.robot:hover .robot-arm-right {
transform-box: fill-box;
transform-origin: center center;
transform: rotateY(180deg) rotate(165deg) translate(3px, -35px);
}

.robot:hover {
animation-play-state: paused;
}