css将屏幕移出屏幕
问题描述:
我想让一个对象移出屏幕(从左向右滑动并从右向左滑动)。 我用这个CSS: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让对象从右向左移出屏幕。
谢谢!
答
我希望我能正确理解你,但我想这应该适合你。
.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>
感谢调查,你的代码有动画,但不喜欢我瓦纳,我有更新我的问题更详细,请大家帮忙。 – QViet