Изменение размера от нижнего края

Question

Как сделать, чтобы класс .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>

Answer 1

Вариант с position: absolute;

.container {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 180px;
  background-color: red;
}

.block {
  position: absolute;
  bottom: 0;
  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 class="container">
  <div class="block"></div>
</div>

Answer 2

Вариант с Flexbox:

.container {
  display: flex;
  align-items: flex-start;
  width: 120px;
  height: 180px;
  background-color: red;
}

.block {
  align-self: flex-end;
  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: 180px;
  }
}

<div class="container">
  <div class="block"></div>
</div>

Answer 3

Grid вариант:

.container {
  display: grid;
  width: 120px;
  height: 180px;
  background-color: red;
}

.block {
  align-self: end;
  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: 180px;
  }
}

<div class="container">
  <div class="block"></div>
</div>

БЛОГ НА HUSL

Изменение размера от нижнего края

Ответы (3 шт):