CSS fan animation

Question

Ich habe drei verschiedene Bilder, auf die ich einen Fan wie Animation anwenden möchte.

Ich kann die Bilder in Photoshop nicht zusammenführen, da ich möchte, dass die Bilder nacheinander erscheinen. http://jsfiddle.net/wzht89r3/2/

Lösung in Jquery oder Javascript sein können:

Dies ist der Code

.bannerimg{ 
 
    position:relative; 
 
} 
 

 
.bannerimg img{ 
 
    position:absolute; 
 
    max-width:500px; 
 
} 
 

 
.bannerimg .bannerhtml{ 
 
    -ms-transform: rotate(300deg); /* IE 9 */ 
 
    -webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(300deg); 
 
    max-width:175px; 
 
    left:50px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 200ms both; 
 
    animation: fadeIn 500ms ease-in-out 200ms both; 
 
} 
 

 
.bannerimg .bannercss{ 
 
    -ms-transform: rotate(63deg); /* IE 9 */ 
 
    -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(63deg); 
 
    max-width:170px; 
 
    top:9px; 
 
    left:227px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 600ms both; 
 
    animation: fadeIn 500ms ease-in-out 600ms both; 
 
} 
 

 
.bannerimg .bannerjs{ 
 
    -ms-transform: rotate(180deg); /* IE 9 */ 
 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(180deg); 
 
    max-width:175px; 
 
    top:150px; 
 
    left:135px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 1000ms both; 
 
    animation: fadeIn 500ms ease-in-out 1000ms both; 
 
} 
 

 
.windmill 
 
{ 
 
    animation: spin-clockwise 1.25s linear 1200ms infinite; 
 
    transform-origin: 30% 100%; 
 
} 
 

 
@keyframes spin-clockwise { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    0% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    } 
 
}

<div class="bannerimg windmill"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" /> 
 
</div>

Dies ist die Geige (ich habe Dummy-Bilder im Code verwendet).

Answer 1

So ähnlich? Ich habe gerade die transform-origin Ihrer .windmill Regel geändert.

.bannerimg{ 
 
    position:relative; 
 
} 
 

 
.bannerimg img{ 
 
    position:absolute; 
 
    max-width:500px; 
 
} 
 

 
.bannerimg .bannerhtml{ 
 
    transform: rotate(300deg); 
 
    max-width:175px; 
 
    left:50px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 200ms both; 
 
    animation: fadeIn 500ms ease-in-out 200ms both; 
 
} 
 

 
.bannerimg .bannercss{ 
 
    -ms-transform: rotate(63deg); /* IE 9 */ 
 
    -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(63deg); 
 
    max-width:170px; 
 
    top:9px; 
 
    left:227px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 600ms both; 
 
    animation: fadeIn 500ms ease-in-out 600ms both; 
 
} 
 

 
.bannerimg .bannerjs{ 
 
    -ms-transform: rotate(180deg); /* IE 9 */ 
 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(180deg); 
 
    max-width:175px; 
 
    top:150px; 
 
    left:135px; 
 
    -webkit-animation: fadeIn 500ms ease-in-out 1000ms both; 
 
    animation: fadeIn 500ms ease-in-out 1000ms both; 
 
} 
 

 
.windmill 
 
{ 
 
    animation: spin-clockwise 1.25s linear 1200ms infinite; 
 
    transform-origin: 220px 150px; 
 
} 
 

 
@keyframes spin-clockwise { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    0% { 
 
    opacity:0; 
 
    } 
 
    100% { 
 
    opacity:1; 
 
    } 
 
}

<div class="bannerimg windmill"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" /> 
 
</div>

Answer 2

Persönlich würde ich loszuwerden, die zusätzlichen Klassen bekommen und die :nth-child pseudo class verwenden. Jedes Kind mit einem eigenen Offset (zum Beispiel: top:150px; left:135px;) würde bedeuten, dass Sie die Positionierung jedes Mal neu berechnen müssten, wenn Sie das Bild ändern, also entfernte ich sie und fand eine andere Art der Positionierung.

Ich habe verschiedene Bilder verwendet, da sie in die falsche Richtung zeigen. Damit dies funktioniert, muss der Pfeil dem Rotationsursprung zugewandt sein, in diesem Fall 0 0 oder oben links.

Um die Antwort zu verdichten, entfernte ich alle Herstellerpräfixe und die Überblendungen.

#windmill { 
 
    animation: spin-clockwise 2s linear 1200ms infinite; 
 
    transform-origin: 0 0; 
 
    position: relative; 
 
    top: 100px; /*Image dimensions*/ 
 
    left: 100px; 
 
} 
 
#windmill > * { 
 
    position: absolute; 
 
    transform-origin: 0 0; 
 
} 
 
#windmill > *:nth-child(1) {transform: rotate(0deg);} 
 
#windmill > *:nth-child(2) {transform: rotate(120deg);} 
 
#windmill > *:nth-child(3) {transform: rotate(240deg);} 
 
@keyframes spin-clockwise { 
 
    from { transform: rotate(0deg); } 
 
    to { transform: rotate(360deg); } 
 
}

<div id="windmill"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" /> 
 
</div>