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