Css 在实际悬停元素之前发生的动画

我已经在另一个元素的中心放置了一个圆，当我悬停时，一个方框阴影会出现，它会稍微移动。这是可行的，但由于某些原因，当我刷新页面时，圆圈会从右下角快速移动到中间。此移动是动画的，仅在页面刷新时发生。为什么会这样

 <div class="col-1-of-2">
      <div class="bg-video">
        <div class="bg-video__circle">
          &nbsp;
        </div>
      </div>
</div>

.bg-video {
    position: relative;
    background-image: linear-gradient(rgba($color-primary, 0.8), rgba($color-secondary, 0.8)),  url(../img/hero.jpg);
    background-size: cover;
    height: 39rem;
    width: auto;

    &__circle {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
        background-color: $color-white;
        transition: box-shadow .4s, transform .4s;

        &:hover {

            box-shadow: 0 1rem 2rem rgba(#000, .4);  
            transform: translate3d(-50%,-52%,0);
            cursor: pointer;

        }
    }
}

---

因为在

变换

上有一个

变换

，所以将其从元素的默认状态设置为非0,0。因此，当刷新时加载

和

时，它会通过

translate3d（-50%，-50%，0）

对从0,0到的转换进行动画处理，因为转换：box shadow.4s，transform.4s；他在告诉它。这是意料之中的。干杯

.bg-video {
  position: relative;
  background-image: linear-gradient(rgba(41, 128, 185, 0.8), rgba(142, 68, 173, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  height: 39rem;
  width: auto; }
  .bg-video__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: #fff;
    transition: box-shadow .4s, transform .4s; }
    .bg-video__circle:hover {
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
      transform: translate3d(-50%, -52%, 0);
      cursor: pointer; }