Css动画:从左到右？
Css动画:从左到右？
提问于 2019-03-15 00:38:28
我正在尝试创建一个动画，它在页面的左侧滑出，然后在右侧滑回，然后继续这样做，就像循环一样。到目前为止，我只有下面的代码，我不确定如何创建我想要做的事情。帮助将会更加贴切！
section {
position: absolute;
animation:linear infinite alternate;
animation-name: run;
animation-duration: 5s;
}
@keyframes run {
0% { left: 0;}
50%{ left : 100%;}
100%{ left: 0;}
}
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-15 00:44:13
这个怎么样？
@keyframes run {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(-100vw);
}
50.000001% {
transform: translateX(100vw);
}
}
.circle {
width: 50px;
height: 50px;
background: red;
border-radius: 50%;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}<div class="circle"></div>
Stack Overflow用户
发布于 2019-03-15 00:51:40
您也可以使用两个项目来执行此操作，其中一个项目在屏幕上启动，另一个项目在屏幕外启动：
body{
overflow:hidden;
}
div{
width:100px;
height:100px;
border:3px solid red;
position:absolute;
animation:move 2s linear infinite forwards;
}
div:first-of-type{
top:calc(50% - 50px);
left:calc(50% - 50px);
}
div:last-of-type{
top:calc(50% - 50px);
left:calc(150% - 50px);
}
@keyframes move{
from{
transform:translateX(0)
}
to{
transform:translateX(-100vw)
}
}Stack Overflow用户
发布于 2019-03-15 04:07:39
你几乎做得很好，只需将left:100%设置为最终状态，并在开始时添加一个转换，从而将元素隐藏在初始状态：
.box {
position: absolute;
animation: linear infinite;
animation-name: run;
animation-duration: 2s;
background:red;
width:50px;
height:50px;
}
@keyframes run {
0% {
left: 0;
transform:translateX(-100%);
}
100% {
left: 100%;
}
}
body {
margin:0;
overflow:hidden;
}<div class="box"> </div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55167817
复制相关文章
相似问题