CSS fan animation - Photoshop

Antony
October 4, 2015
207 views
1 vote
2 Answers

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

I cant club the images in Photoshop as I want the images to appear one after the other.

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

Solution can also be in jquery or javascript.

Answers

Something like this? I just changed the transform-origin of 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>

Personally I would get rid of those additional classes and use the :nth-child pseudo class. Having each child with it’s 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 removed them and found another way of positioning.

I used different images as they were facing the wrong direction. For this to work the arrow must be facing the rotation origin, in this case 0 0 or top-left.

To condense the answer I removed all vendor prefixes and the fade in 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>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS fan animation – Photoshop

Answers