Question

这是我的css

html , body{
    height:100%;
    width:100%;
    overflow:hidden;
}
.screen-main{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    background-color:red;
}
.screen-login{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    background-color:green;
    -webkit-transform:translate3d(100%,0%,0px);
}
.screen-login-left{
    position:absolute;
    width:100%;
    height:100%;
    background-color:green;
    top:0%;
    left:0%;
    -webkit-transform:translate3d(0%,0%,0px);
    -webkit-animation:right-to-left 0.5s;
}
@-webkit-keyframes right-to-left{
    0%{ -webkit-transform:translate3d(100%,0%,0px); -webkit-animation-timing-function: ease-in;  }
    50%{ -webkit-transform:translate3d(50%,0%,0px); -webkit-animation-timing-function: ease-out;  }
    100%{ -webkit-transform:translate3d(0%,0%,0px); }
}

我的HTML ::

<body>
    <div class="screen-main" >main <a id="to-login-btn">to login</a></div>
    <div class="screen-login" >login</div>
</body>

我的问题:: 它不顺利过渡！

如何修复它们？有些技术可以帮忙吗？我可以使用left或transform：translate（）进行转换吗？关于浏览器重排？（我不确定）

请帮帮我。非常感谢你。

Answer 1

要发生动画，您应该将动画类添加到任何元素

<body class="screen-login-left">
    <div class="screen-main">main <a id="to-login-btn">to login</a>
    </div>
    <div class="screen-login">login</div>
</body>

如果你想让它更流畅，只需增加动画速度

.screen-login-left {
    position:absolute;
    width:100%;
    height:100%;
    background-color:green;
    top:0%;
    left:0%;
    -webkit-transform:translate3d(0%, 0%, 0px);
    -webkit-animation:right-to-left 3s;
}

如何为全屏页面顺利制作css动画？

1 个答案: