I don't think that it can be achieved using the scale transforms.
You can do a trick and change from scale() to translateZ(). When a perspective is applied, the net effect will be also a scale. But the interesting point is than setting perspective to a high value, this scale effect can be made very small. And perspective is an animatable property.
The downside is that we will need to add 2 wrap around layers... but the final result is this. I have kept the original version to compare
@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 {
background-color: lightblue;
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 animation2 {
0% { transform: translateZ(0px);}
70% { transform: translateZ(-300px); }
80% { transform: translateZ(-100px); }
100% { transform: translateZ(0px); }
}
<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
<div class="base2">
<div class="inner">DEMO</div>
</div>
</div>