CSS动画:使div浮动出文档
CSS动画:使div浮动出文档
提问于 2017-08-23 03:25:08
我想创建一个从左到右漂浮的云的CSS动画。我有一个宽度为100%的div，云是带有"position:absolute“的图像。我的解决方案很简单:创建一个动画，它会随着时间的推移将图像的"left“属性更改为120%。然而，该解决方案的问题是，云在跨过整个HTML文档的全宽度后会扩展整个HTML文档的宽度。
我如何防止这种情况，并使云在穿过100%宽度后简单地消失在右侧？提前感谢！
编辑:这是CSS的一部分：
.header{
display:flex;
flex-direction:row;
height: 40em;
justify-content:center;
align-items:center;
width:100%;
overflow:hidden;
}
.cloud{
position:absolute;
left:-10%;
animation: cloud 10s linear infinite;
}
@keyframes cloud{
100%{
left:150%;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-23 03:31:28
这里有一个简单的例子；使用transform而不是left，因为它将使用gpu加速。overflow-x隐藏在body标记上，以阻止滚动条出现。
body {
min-width: 100vw;
overflow-x: hidden;
}
.cloud {
width: 100px;
height: 50px;
background: red;
animation-name: cloud-animation;
animation-fill-mode: forwards;
animation-duration: 5s;
}
#cloud-2 {
animation-delay: 0.2s;
}
#cloud-3 {
animation-delay: 0.4s;
}
@keyframes cloud-animation {
from {
transform: translateX(0);
}
to {
transform: translateX(100vw);
}
}<div id="cloud-1" class="cloud"></div>
<div id="cloud-2" class="cloud"></div>
<div id="cloud-3" class="cloud"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45825473
复制相关文章
相似问题
腾讯云开发者
