@keyframes first-animation {
0% { transform: scale(1,1);}
50% { transform: scale(0.8,0.8); }
100% { transform: scale(1,1); }
}

@keyframes second-animation {
0% { transform: scale(1,1); }
70% { transform: scale(0.7,0.7); }
80% { transform: scale(0.9,0.9); }
100% { transform: scale(1,1);  }
}

.sample {
    animation: first-animation 1.7s ease-in-out infinite;
}

.sample:hover {
animation: second-animation 1.1s ease-in-out infinite;
}

.dim {
    width: 200px;
    height: 200px;
}

.base1 {
    perspective: 1000px;
    transition: perspective 2s ease-out;
    position: absolute;
    left: 300px;
  top: 10px;
}
.base1:hover {
    perspective: 9999px;
}

.base2 {
    width: 100%;
    height: 100%;
    animation: animation1 1.7s ease-in-out infinite;
    perspective: 9999px;
    transition: perspective 2s ease-in;
}
.base1:hover .base2 {
    perspective: 1000px;
}

.inner {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    animation: animation2 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 99999px;
}

@keyframes animation1 {
0% { transform: translateZ(0px);}
50% { transform: translateZ(-200px); }
100% { transform: translateZ(0px); }
}

@keyframes animation-seconds {
      0% { transform: translateZ(0px);}
     70% { transform: translateZ(-300px); }
     80% { transform: translateZ(-100px); }
    100% { transform: translateZ(0px); }
}