JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<div class="right-content hd-circles">
    <div class="hidden-med">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circle-bg.png" alt="Inspiring Healthy Decisions" width="465" height="459">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-1.png" alt="Prescription Medicines" class="circle one" width="111" height="110" style="-webkit-transform: translate(0px, 178px); transform: translate(0px, 178px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-2.png" alt="Consumer Health Products" class="circle two" width="111" height="110" style="-webkit-transform: translate(-120px, 140px); transform: translate(-120px, 140px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-3.png" alt="Healthy Services" class="circle three" width="111" height="110" style="-webkit-transform: translate(-180px, 0px); transform: translate(-180px, 0px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-4.png" alt="Healthy Beauty" class="circle four" width="111" height="110" style="-webkit-transform: translate(-120px, -130px); transform: translate(-120px, -130px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-5.png" alt="Food and Nutrition" class="circle five" width="111" height="110" style="-webkit-transform: translate(0px, -183px); transform: translate(0px, -183px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-6.png" alt="Not for Profit" class="circle six" width="111" height="110" style="-webkit-transform: translate(140px, -130px); transform: translate(140px, -130px);">
        <img src="http://www.pegasusstaging.com/img/section/who-we-work-with/circles/circle-7.png" alt="Animal Health" class="circle seven" width="111" height="110" style="-webkit-transform: translate(190px, 0px); transform:...

CSS

.anim {
    -webkit-transform: translate(0px, 0px)!important;
    transform: translate(0px, 0px)!important;
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    transition:all 0.5s linear;
}
.right-content img.circle {
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
.right-content img.bg-main {
    position: absolute;
    opacity: 1;
    left: 0;
}
.right-content img.circle.one {
    top: -5px;
    left: 180px;
}
.right-content img.circle.two {
    top: 35px;
    left: 305px;
}
.right-content img.circle.three {
    top: 172px;
    left: 365px;
}
.right-content img.circle.four {
    top: 305px;
    left: 305px;
}
.right-content img.circle.five {
    top: 355px;
    left: 180px;
}
.right-content img.circle.six {
    top: 305px;
    left: 45px;
}
.right-content img.circle.seven {
    top: 172px;
    left: -5px;
}
.right-content img.circle.eight {
    top: 35px;
    left: 45px;
}

JavaScript

$(function () {
    setTimeout(function () {
        $('.hidden-med img').addClass('anim');
    }, 1500);
});