时间戳

首页 > 解决方案 > 页面重访时的过渡

css - 页面重访时的过渡

问题描述

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

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

标签： csstransitionpageload

解决方案

您好，我认为您正在寻找的是动画

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

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

推荐阅读