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

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

因为您在 transform 上有一个 transition，您已将其从元素的默认状态设置为非 0,0。因此，当 &__circle 在刷新时加载时，它通过 translate3d(-50%,-50%,0) 动画化到从 0,0 到的转换，因为转换:框-shadow .4s, transform .4s;正在告诉它。这是意料之中的。干杯!