CSS fan animations

Question

I have three different images to which I want to apply a fan animation.

I cannot display images in Photoshop because I want the images to be displayed one after another.

This is code (I used dummy images in 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> 

This is the fiddle: http://jsfiddle.net/wzht89r3/2/

The solution can also be in jquery or javascript.

Answer 1

Something like that? I just changed the transform-origin your .windmill rule.

 .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

Personally, I would get rid of these extra classes and use : nth-child pseudo- class. Having each child with its own offset (for example: top:150px; left:135px; ) would mean that you would have to recalculate the positioning every time you change the image, so I deleted them and found a different way of positioning.

I used different images as they encountered the wrong direction. To do this, the arrow should be facing the start of rotation, in this case 0 0 or top left.

To condense the answer, I removed all the vendor prefixes and attenuation in the transitions.

 #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>