I am trying to arrange the font awesome animated cogs in a very particular way (as per image below)
I have created a fiddle of the closest I seem to be able to get. The fiddle is here https://jsfiddle.net/rke45798/13/
.slow-ani {
-webkit-animation: fa-spin 6s infinite linear;
animation: fa-spin 6s infinite linear;
}
.fa-small {
font-size: 84px;
}
.fa-med {
font-size: 70px;
}
.fa-lge {
font-size: 48px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" >
<div class="cogs">
<i class="fas fa-cog fa-small slow-ani"></i>
<br>
<i class="fas fa-cog fa-med slow-ani"></i>
<i class="fas fa-cog fa-lge slow-ani"></i>
</div>
Is the arrangement I've shown in the image above achievable? If so are there any CSS tricks that can be applied?
You can use the classes provided by Font Awesome to achieve this. Better consider the SVG version to easily manage this.
.slow-ani > * {
animation-duration:5s;
}
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" ></script>
<span class="cogs slow-ani">
<i class="fas fa-cog fa-4x fa-spin" data-fa-transform="down-5 right-5"></i>
<i class="fas fa-cog fa-3x fa-spin" data-fa-transform="down-17 right-3"></i>
<i class="fas fa-cog fa-5x fa-spin" data-fa-transform="left-7"></i>
</span>
Transformation: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
Sizing: https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With