html - 通过 css 将 div 移入屏幕

Question

我想要一个对象移出和移入屏幕(从左向右滑入并从右向左滑出)。我使用这个 CSS:

 @-webkit-keyframes slideInSmooth {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
    }
    100% {
        -webkit-transform: translate3d(0,0,0);
    }
}

@-webkit-keyframes slideOutSmooth {
    0% {
        -webkit-transform: translate3d(0,0,0);
    }
    100% {
        -webkit-transform: translate3d(-100%,0,0);
    }
}
.tabs {
    -webkit-animation: slideInSmooth ease-in 250ms;
    animation: slideInSmooth ease-in 250ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms;

}

.tabs-item-hide > .tabs{
    -webkit-animation: slideOutSmooth ease-in 250ms;
    animation: slideOutSmooth ease-in 250ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 250ms;
    animation-duration: 250ms;
}

我的 Html 是这样的:

<div id="div1" class="">
 <div class="tabs">
 </div>
</div>

• 类 tabs-item-hide 将通过事件添加到 div1 中并在该元素之后隐藏。
• 类 tabs-item-hide 将在 div1 中被一个事件移除如果想要显示项

代码在对象显示时工作正常，从左向右完美滑动。但是当对象隐藏时它什么都不做!

请帮助我更正我的 css，使对象从屏幕右向左移动。

谢谢!

Answer 1

希望我理解正确，但我想这应该对你有用。

.tabs-item-hide {
  width:100%;
  overflow:hidden;
  position:relative;
  height:50px;
}

@-webkit-keyframes slideInSmooth {
  0% { left:0; }
  90% { left:100%; }
  90.0001% { left:-50px; }
  100% { left:0; }
}

@keyframes slideInSmooth {
  0% { left:0; }
  90% { left:100%; }
  90.0001% { left:-50px; }
  100% { left:0; }
}

.tabs {
  -webkit-animation: slideInSmooth 2.5s forwards;
  animation: slideInSmooth 2.5s forwards;
  position:absolute;
  width:50px;
  height:50px;
  background:#ffa500;
}

<div class="tabs-item-hide">
	<div class="tabs"></div>
</div>