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>