將兩個關鍵幀移動添加到css

嘗試使用CSS創建兩種不同類型的關鍵幀移動。什麼是最簡單和最乾淨的方式來實現這一點？我希望雲像他們現在這樣向上移動，但我也希望他們在他們正在上升時動搖一點。謝謝你的幫助。將兩個關鍵幀移動添加到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%;}

來源

2017-02-28 Jeffro Jeffro

你可以雙重包裝HTML中的雲嗎？讓父包裝器使用現有的'moveclouds'關鍵幀，並且子包裝器使用一個可以「搖動」它們的新動畫。

來源

2017-02-28 20:45:37 TerraElise

沒有工作... .shake：hover {動畫：搖動0.82s立方貝塞爾（.36，.07，.19，.97）; transform：translate3d（0，0，0）; backface-visibility：hidden; perspective：1000px; } 關鍵幀搖{ 10％，90％{ 變換：translate3d（-1px，0，0）; } 20％，80％變換：translate3d（2px，0,0）; } 30％，50％，70％transform：translate3d（-4px，0,0）; } 40％，60％變換：translate3d（4px，0,0）; } } –

@JeffroJeffro你目前的HTML是什麼？我建議讓所有內容保持一致，但在另一個DIV內部（一個孩子）添加一個不同的類，調用不同的動畫。如果你會開始一個小提琴，我可以幫助編輯向你展示。 – TerraElise

https://jsfiddle.net/computerjeff05/xzha2Ltp/1 –

將兩個關鍵幀移動添加到css

回答

相關問題