在纯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>