Fan only With CSS

Fan only With CSS

by Ganesh Salunkhe

HTML

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

CSS

.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;
    }
}