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 : 호버 { 애니메이션 : 흔들림 0.82s 큐빅 베지 (.36, .07, .19, .97) 모두; 변형 : translate3d (0, 0, 0); 뒷면 표시 : 숨김; perspective : 1000px; } 키 프레임 쉐이크 { 10 %, 90 % { 변환 : translate3d (-1px, 0, 0); } 20 %, 80 % { transform : translate3d (2px, 0, 0); } 30 %, 50 %, 70 % { 변환 : translate3d (-4px, 0, 0); } 40 %, 60 % { transform : translate3d (4px, 0, 0); } } –

@JeffroJeffro 현재 HTML은 무엇입니까? 모든 것을 동일하게 유지하면서 다른 애니메이션을 호출하는 다른 클래스가있는 (자식) 내부에 다른 DIV를 추가 할 것을 제안합니다. 바이올린을 시작하면 편집을 도와 줄 수 있습니다. – TerraElise

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

CSS에 두 개의 키 프레임 이동 추가

답변

관련 문제