css的transform假死问题

在进入界面的时候有一个过度界面，通过css设置的旋转动画，偶尔会产生假死效果，页面没有任何反应，按钮也不能点击

有没有人遇到过这个问题？

.change {

  position: absolute;

  left: 40%;

  margin: 0 auto;

  height: 150rpx;

  width: 150rpx;

  border-radius: 50%;

  border-left: 6rpx solid #69ffac;

  border-top: 6rpx solid #20a0ff;

  border-right: 6rpx solid #ffe29f;

  border-bottom: 6rpx solid #20a0ff;

  animation: change 2s linear infinite;

  z-index: 2;

}

@keyframes change {

  0% {

    transform: rotate(0deg);

  }

  50% {

    transform: rotate(180deg);

  }

  100% {

    transform: rotate(360deg);

  }

}