Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

CSS 3 transition

header mp css3-e1320821129923

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)


Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords