Animated rollover links;

[SlackulatoR]

Γνωρίζει κανείς με ποιόν τρόπο μπορώ να κάνω την αλλαγή χρώματος στα links με delay animation σαν το παρακάτω site: http://tera.enmasse.com/

 

Μιλάω για τα links που είναι στα tags(δεξιά της σελίδας) ή στο footer.

[TheELF]

Από ότι φαίνεται στο css τους

http://tera-cdn3.enmasse-game.com/assets/application-138bfbed6608b9504c54fbeef261bf8f.css

 

>nav#tags a:after{content:","}nav#tags a.tag1{opacity:0.4}nav#tags a.tag2{opacity:0.6}nav#tags a.tag3{opacity:0.8}nav#tags a.tag4{opacity:1}nav#tags a:hover{opacity:1}

Απλά έχει διαφάνεια στο κανονικό τους και όταν κάνεις hover αυτή αφαιρείτε.

[nkcc]

Όπως ανέφερε και ο TheELF την απάντηση θα την βρεις στο CSS τους.

Προτείνω να χρησιμοποιείς κάποιο εργαλείο όπως τον firebug, που κάνει αυτόματα και unminify τα css.

 

Το εφέ γίνεται λόγω του παρακάτω:

>
a {
   /*Transition properties*/
   -moz-transition-duration: 0.3s;
   -moz-transition-timing-function: ease;


   color: #0297FF;
   text-decoration: none;
}

a:hover {
   color: #6EC3FF;
   text-decoration: underline;
}

Το color διαφέρει στο hover state και αφού έχει οριστεί το -moz-transition-duration η αλλαγή του χρώματος θα γίνει σε 0.3 δευτερόλεπτα.

 

Δοκίμασε να ψάξεις στο google για CSS Transitions.(Είναι μέρος του CSS3)