页面重新访问时的转换

问题描述

我在 div 元素上有一个简单的转换和过渡。但是，它似乎不适用于页面加载/重新访问。 如果我能被引导到可能的解决方案，我真的很感激。

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

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

解决方法

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

过渡本身不会触发任何移动

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