Hinzufügen von zwei Keyframe-Bewegungen zu css

Der Versuch, zwei verschiedene Arten von Keyframe-Bewegungen mit CSS zu erstellen. Was ist der einfachste und sauberste Weg, dies zu erreichen? Ich möchte, dass die Wolken sich nach oben bewegen, wie sie es momentan tun, aber ich möchte auch, dass sie ein bisschen schütteln, wenn sie hochgehen. Danke für Ihre Hilfe.Hinzufügen von zwei Keyframe-Bewegungen zu 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%;}

Quelle

2017-02-28 Jeffro Jeffro

Können Sie die Wolken doppelt in HTML umhüllen? Verwenden Sie den übergeordneten Wrapper mit den vorhandenen Keyframes "moveclouds" und den untergeordneten Wrapper mit einer neuen Animation, die sie "schüttelt".

Quelle

2017-02-28 20:45:37 TerraElise

Hat nicht funktioniert ... .shake: Hover { Animation: shake 0.82s kubisch-Bezier (.36, .07, .19, .97) beide; transform: translate3d (0, 0, 0); backface-visibility: versteckt; Perspektive: 1000px; } keyframes schütteln { 10%, 90% { Transformation: translate3d (-1px, 0, 0); } 20%, 80% { transform: translate3d (2px, 0, 0); } 30%, 50%, 70% { transform: translate3d (-4px, 0, 0); } 40%, 60% { transform: translate3d (4px, 0, 0); } } –

@JeffroJeffro Was ist Ihr aktuelles HTML? Ich schlage vor, alles gleich zu halten, aber ein anderes DIV (ein Kind) mit einer anderen Klasse hinzuzufügen, die verschiedene Animationen aufruft. Wenn du eine Geige spielen würdest, könnte ich dir helfen, sie zu bearbeiten. – TerraElise

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

Hinzufügen von zwei Keyframe-Bewegungen zu css

Antwort

Verwandte Themen