transform и background-size

Question

Есть ли transform, который изменит не длину и ширину, а background-size?
Делаю анимацию через @keyframes, и с background-size завершение идет рывками. Или есть другой способ?

.pic_dev {
  width: 100px;
  height: 200px;
  background-image: url(../img/pic1.png);
  background-repeat: no-repeat;
  animation-name: anim_pic_dev;
  animation-duration: 3000ms;
}

@keyframes anim_pic_dev {
  from {
    background-size: 100px 100px;
  }
  to {
    background-size: 100px 200px;
  }
}

<div class="pic_dev"></div>

Answer 1

Такой вариант?

.pic_dev {
  width: 100px;
  height: 200px;
  background-image: url('//i.imgur.com/rzqucbw.png');
  background-repeat: no-repeat;
  animation-name: anim_pic_dev;
  animation-duration: 3000ms;
  animation-fill-mode: forwards;
}

@keyframes anim_pic_dev {
  from {
    background-size: 100px 100px;
  }
  to {
    background-size: 100px 200px;
  }
}

<div class="pic_dev"></div>

Если подходит, то используйте animation-fill-mode: forwards; - подробнее тут

Answer 2

Можно так
В данном примере я каждому transform прописал translateZ(0), это необходимо для того, чтобы элемент не был мутным (вы можете убрать это и заметите это), можете посмотреть на вариант анимации с background-size, там это будет заметно

.pic_dev {
  width: 100px;
  height: 100px;
  background: url(//i.imgur.com/rzqucbw.png) no-repeat;
  background-size: cover;
  animation: anim_pic_dev 3s forwards;
  transform-origin: left top;
  transform: scaleY(1) translateZ(0);
}

@keyframes anim_pic_dev {
  from {
    transform: scaleY(1) translateZ(0);
  }
  to {
    transform: scaleY(2) translateZ(0);
  }
}

<div class="pic_dev"></div>

Также можно использовать will-change для этого и не писать везде translateZ(0)

.pic_dev {
  width: 100px;
  height: 100px;
  background: url(//i.imgur.com/rzqucbw.png) no-repeat;
  background-size: cover;
  animation: anim_pic_dev 3s forwards;
  transform-origin: left top;
  transform: scaleY(1);
  will-change: transform;
}

@keyframes anim_pic_dev {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(2);
  }
}

<div class="pic_dev"></div>

БЛОГ НА HUSL

transform и background-size

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