将两个关键帧移动添加到 css答案

【问题标题】：Add two keyframe movements to css将两个关键帧移动添加到 css
【发布时间】：2017-03-01 06:12:09
【问题描述】：

尝试使用 CSS 创建两种不同类型的关键帧移动。完成此任务的最简单和最干净的方法是什么？我希望云像现在一样向上移动，但我也希望它们在上升时稍微晃动。感谢您的帮助。

#clouds div {position:absolute; width:230px;}
#clouds div img{ display:block; margin-left: auto;margin-right: auto;}
.Blittle img{ width:42px; float:left;}
.BlittleUP img{ width:51px; float:right}
.Bmedium img{ width:90px; float:left}
.BmediumUP img{ width:120px; float:right}
.BmediumUPUP img{ width:140px}
.Bbig img{ width:280px; float:right}

.Blittle { animation: moveclouds 14s infinite linear forwards;-webkit-animation: moveclouds 14s infinite linear forwards;-moz-animation: moveclouds 14s infinite linear forwards;-o-animation: moveclouds 14s infinite linear forwards;}
.BlittleUP  { animation: moveclouds 16s infinite linear forwards; -webkit-animation: moveclouds 16s infinite linear forwards;-moz-animation: moveclouds 16s infinite linear forwards;-o-animation: moveclouds 16s infinite linear forwards;}
.Bmedium   { animation: moveclouds 17s infinite linear forwards;-webkit-animation: moveclouds 17s infinite linear forwards;-moz-animation: moveclouds 17s infinite linear forwards;-o-animation: moveclouds 17s infinite linear forwards;}
.BmediumUP  { animation: moveclouds 18s infinite linear forwards;-webkit-animation: moveclouds 18s infinite linear forwards;-moz-animation: moveclouds 18s infinite linear forwards;-o-animation: moveclouds 18s infinite linear forwards;}
.BmediumUPUP  { animation: moveclouds 19s infinite linear forwards;-webkit-animation: moveclouds 19s infinite linear forwards;-moz-animation: moveclouds 19s infinite linear forwards;-o-animation: moveclouds 19s infinite linear forwards;}
.Bbig  { animation: moveclouds 22s infinite linear forwards;-webkit-animation: moveclouds 22s infinite linear forwards;-moz-animation: moveclouds 22s infinite linear forwards;-o-animation: moveclouds 22s infinite linear forwards;}


.BC-1 {left:5%; }
.BC-2 {left:14.5%;}
.BC-3 {left:25%;}
.BC-4 {left:37.5%; }
.BC-5 {left:50%;}
.BC-6 {left:62.5%; }
.BC-7 {left:75%;}
.BC-8 {left:87.5%; }


.BC-1 img{ margin-top:500px}
.BC-2 img{margin-top:100px}
.BC-3 img{ margin-top:300px}
.BC-4 img{ margin-top:150px}
.BC-5 img{margin-top:350px}
.BC-6 img{ margin-top:0px}
.BC-7 img{ margin-top:700px}
.BC-8 img{ margin-top:100px}
.Blittle.BC-8 img{margin-top:350px}
.BlittleUP.BC-3 img{margin-top:0px}
.BmediumUP.BC-4 img{margin-top:700px}



@keyframes moveclouds { 
    0% {  transform: translate(0px, 700px);}
    100% { transform: translate(0px, -1200px);}
}

@-webkit-keyframes moveclouds { 
    0% {  -webkit-transform: translate(0px, 700px);}
    100% { -webkit-transform: translate(0px, -1200px);}
}

@-moz-keyframes moveclouds { 
    0% {  -moz-transform: translate(0px, 700px);}
    100% { -moz-transform: translate(0px, -1200px);}
}
@-o-keyframes moveclouds { 
    0% {  -o-transform: translate(0px, 700px);}
    100% { -o-transform: translate(0px, -1200px);}
}
#clouds .container { position:absolute; top:50%;     -webkit-transform: translate(0%, -50%);   -moz-transform: translate(0%, -50%);   -ms-transform: translate(0%, -50%);   -o-transform: translate(0%, -50%);   transform: translate(0%, -50%);     width: 100%;}

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

你能用 HTML 双重包裹云彩吗？让父包装器使用现有的“moveclouds”关键帧，子包装器使用“摇晃”它们的新动画。

【讨论】：

没用...变换： translate3d(0, 0, 0);背面可见性：隐藏；视角：1000px； } 关键帧抖动 { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { 变换: translate3d(2px, 0, 0); } 30%, 50%, 70% { 变换: translate3d(-4px, 0, 0); } 40%, 60% { 变换: translate3d(4px, 0, 0); } }
@JeffroJeffro 您当前的 HTML 是什么？我建议保持一切不变，但在内部（一个孩子）添加另一个 DIV，其中一个不同的类调用不同的动画。如果你想拉小提琴，我可以帮忙编辑给你看。
@JeffroJeffro 谢谢！我的建议是在内部添加动画。所以在更新的小提琴中，我添加了一个对“#clouds div img”的动画调用，这样你们就可以一起发生，但显然你想要自己的动画设置（每个父类可能不同）：jsfiddle.net/3x2zfe5p