Как сделать, чтобы класс .block
изменял свой размер от нижнего края, а не верхнего? Перевернуть не вариант. В том классе будет изображение и само собой оно будет перевернутым.
.block {
width: 120px;
height: 0px;
background-color: blue;
background-repeat: no-repeat;
background-size: 120px 400px;
background-position: left bottom;
will-change: transform;
animation-name: anim_1;
animation-duration: 10s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes anim_1
{
from {
height: 0px;
}
to {
height: 400px;
}
}
<div style="width: 120px; height: 400px; background-color: red;">
<div class="block"></div>
</div>