Xρησιμοποιώντας τεχνικές CSS3 μπορούμε να δημιουργήσουμε animations κάνοντας mouseover πάνω σε ένα στοιχείο χωρίς την χρήση javascript.
Έστω ότι θέλουμε να κάνουμε ένα div να αλλάζει χρώμα κάθε φορά που κάνουμε mouseover (hover) με animation ease-out.
O css κώδικας που θα χρησιμοποιήσουμε είναι ο εξής
div {
width: 150px;
height: 150px;
background-color: red;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
div:hover {
background-color: green;
}
Εδώ χρησιμοποιούμε τη ιδιότητα transition που μας επιτρέπει να αλλάξουμε την τιμή ενός στοιχείου σε ένα ορισμένο διάστημα. Στο παραπάνω παράδειγμα ζητάμε να αλλάζει το background-color του div από κόκκινο σε πράσινο χρώμα , σε 2 δευτερόλεπτα και με animation ease-out όταν ο χρήστης κάνει hover στο div.
Έτσι μπορούμε να δημιουργήσουμε ένα animation χρησιμοποιώντας την ιδιότητα transition και να αλλάξουμε στοιχεία όπως χρώμα, ύψος μήκος, πλάτος, margin, padding κτλ.
.example {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
Εδώ θα βρείτε παραδείγματα και έτοιμο κώδικα για την σελίδα σας!
https://css-tricks.com/almanac/properties/t/transition/https://css-tricks.com/almanac/properties/t/transition/
Σημείωση: για να υποστηρίζεται από όλους τους browser πρέπει να χρησιμοποιούμε μπροστά από την ιδιότητα transition τα αντίστοιχα CSS3 prefixes όπου:
-moz- για Mozilla Firefox και όποιοι άλλοι browsers χρησιμοποιούν Mozilla μηχανή
-webkit- για Safari, Chrome και όποιοι άλλοι browsers χρησιμοποιούν Webkit μηχανή
-o- για Opera
-ms- για Internet Explorer (ΙΕ9)