老师好，请检查2-21代码

来源：2-21 自由编程

慕桂英1122475

2023-03-06 20:12:00

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2-20</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background-image: url(./images/xin.png);
        background-repeat: no-repeat;
      }
      .box1 {
        position: relative;
        margin: 50% auto;
       
      }
      .box2 {
        position: absolute;
        animation: bigger .5s ease 0s infinite;
      }

      @keyframes bigger{
        from{
            transform: scale(1);
           opacity: 1;
        }
        to{
            transform: scale(2);
            opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="box1 box">
      <div class="box2 box"></div>
    </div>
  </body>
</html>

另外请问，为什么我将 .box { width: 100px; height: 100px;} 改成width: 200px; height: 200px;以后，动画效果向左上偏移了，而没有维持原来中心扩散的效果？我本意是将图片放大的。