css将屏幕移出屏幕

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> 

• 类标签项隐藏将DIV1由事件和该项目 隐藏后添加。
• 类标签项隐藏将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"> 
 
\t <div class="tabs"></div> 
 
</div>