[Jxnathan]

Off-topic: how do you apply animation to your logo on activation of the browser tab? I loaded your page in a new tab, but the logo animation didn't fire until I viewed that specific tab.

[sergiotapia]

The three rings are in a span. So it's content 'o' in span, the 'o' in :before and 'o' in :after.

Then he uses a -webkit-animation to translate the positions of each ring.

    @keyframes logo {
    	from {opacity:0;transform:scale(2) rotate(359deg);}
    	to {opacity:1;transform:scale(1) rotate(0deg);}
    }
    @-webkit-keyframes logo {
    	from {opacity:0;-webkit-transform:scale(2) rotate(359deg);}
    	to {opacity:1;-webkit-transform:scale(1) rotate(0deg);}
    }

[Kiro]

But does that explain how it's not triggered until you click the tab?

[pastjean]

This is browser specific to trigger animations on tab open