Добавление эффекта анимации размера фона изображения к элементу в чистом CSS

Question

Почему я не могу добавить анимацию изменения размера фонового изображения div при загрузке? Я знаю, что это выполнимо, используя JS, добавив класс к телу или элементу, но как мы можем достичь этого в чистом CSS?

html,body {
    height: 100%;
    width:100%;
    }

div {
    height: 100%;
    width:100%;
     background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    animation-name: animate;
    transition: all 3s;
}

.animate {
  from {background-size: 100%}
  to {background-size: 110%}
}

<div></div>

Answer 1

html, body { height: 100%; width: 100%; }

div {
  height: 100%;
  width: 100%;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  animation: animate 3s ease forwards;
  transition: all 3s;
}

@keyframes animate {
  from { background-size: 100%; }
  to {  background-size: 150%; }
}

<div></div>