top | item 7422089

(no title)

Jxnathan | 12 years ago

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.

discuss

order

sergiotapia|12 years ago

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|12 years ago

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