анимация происходит перед фактически парящим элементом

Question

Я поместил круг внутри другого элемента, в центре его, и когда я наведусь, должна появиться тень от рамки, и она должна слегка двигаться. Это работает, но по какой-то причине, когда я обновляю страницу, круг очень быстро перемещается из нижнего правого угла в центр. Это движение анимированное и происходит только при обновлении страницы. С чего бы это?

 <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;

        }
    }
}

Вот скомпилированная CSS

.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; }

Answer 1

Поскольку у вас есть transition на вашем transform, для которого вы установили значение не 0,0 от состояния элемента по умолчанию.Поэтому, когда &__circle загружается при обновлении, оно анимируется с этим преобразованием от 0,0 до translate3d(-50%,-50%,0), потому что переход: box-shadow .4s, transform .4s ;говорит это.Этого следовало ожидать.Ура!