Reduce the size of an icon during the animation - css

Question

I'm trying to reduce the size of the icon-container (from 110px in 0% to 50px in 100%) when the animation "slide-bck-top" is on focus. I tried to pass &__icon-container {} inside #keyframes but it didnt work.
here is my scss file:
.button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
height: 150px;
width: 230px;
background-color: transparent;
outline: none;
&__icon-container {
width: 100px;
height: 100px;
border-radius: 50%;
color: color(white-0);
background-color: color(blue-150);
box-shadow: 0px 4px 4px color(black-0, 0.25);
padding: 20px;
cursor: pointer;
}
&__icon {
fill: currentColor;
width: 50px;
height: 50px;
}
&:focus {
animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
#keyframes slide-bck-top {
0% {
transform: translateZ(0) translateY(0);
}
100% {
transform: translateZ(-400px) translateY(-200px);
}
}
}

Answer 1

The issue is #keyframes won't allow you to pass a selector, since it's meant for properties and SCSS won't compile it correctly nested. It would be like passing the selector in the color: attribute.
What you could do is pass the .button__icon-container into the :focus and move the #keyframes outside of the .button, since #keyframes is really a global scope item and SCSS/SASS will still render it outside of the .button anyway.
.button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
height: 150px;
width: 230px;
background-color: transparent;
outline: none;
&__icon-container {
width: 100px;
height: 100px;
border-radius: 50%;
color: color(white-0);
background-color: color(blue-150);
box-shadow: 0px 4px 4px color(black-0, 0.25);
padding: 20px;
cursor: pointer;
}
&__icon {
fill: currentColor;
width: 50px;
height: 50px;
}
&:focus {
animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
.button__icon-container {
animation: make-small 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
}
}
#keyframes slide-bck-top {
0% {
transform: translateZ(0) translateY(0);
}
100% {
transform: translateZ(-400px) translateY(-200px);
}
}
#keyframes make-small {
0% {
width: 110px;
height: 110px;
}
100% {
width: 50px;
height: 50px;
}
}
It compiles to this:
.button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: none;
height: 150px;
width: 230px;
background-color: transparent;
outline: none;
}
.button__icon-container {
width: 100px;
height: 100px;
border-radius: 50%;
color: color(white-0);
background-color: color(blue-150);
box-shadow: 0px 4px 4px color(black-0, 0.25);
padding: 20px;
cursor: pointer;
}
.button__icon {
fill: currentColor;
width: 50px;
height: 50px;
}
.button:focus {
animation: slide-bck-top 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
.button:focus .button__icon-container {
animation: make-small 0.3s 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}
#keyframes slide-bck-top {
0% {
transform: translateZ(0) translateY(0);
}
100% {
transform: translateZ(-400px) translateY(-200px);
}
}
#keyframes make-small {
0% {
width: 110px;
height: 110px;
}
100% {
width: 50px;
height: 50px;
}
}

Answer 2

try using the max-height property.
#keyframes slide-bck-top {
0% {
transform: translateZ(0) translateY(0);
max-height:110px;
}
100% {
transform: translateZ(-400px) translateY(-200px);
max-height:50px
}
}