页面重新访问时的过渡

Question

我对 div 元素进行了简单的转换和过渡。但是，它似乎无法在 loads/re-visits 页上运行。如果我能被引导到一个可能的解决方案，我真的很感激。

.container {
    width: 50%;
    text-align: center;
    background: #ccff44;
    padding: 50px 5px;
    border: #000 2px solid;
    margin: auto;
    transform: translate3D(-50px, 0, 0);
    transition: all 2s ease-in;    
}

<div class="container">
  <p>Main paragraph</p>
</div>

Answer 1

您好，我想您要找的是动画

过渡不会自行触发任何移动

@keyframes enter {
  from {
    transform: translateX(-50px);
  }
  to {
    transform: translateX(0px);
  }
}
.container {
  width: 50%;
  text-align: center;
  background: #ccff44;
  padding: 50px 5px;
  border: #000 2px solid;
  margin: auto;
  animation: enter 2s linear;
}

    <div class="container">
      <p>Main paragraph</p>
    </div>

页面重新访问时的过渡

Transition on page re-visit

css

transition

pageload