Τα 20 Καλύτερα CSS Animations στο CodeCanyon

() translation by (you can also view the original English article)

Υπήρχε μια εποχή στην ιστορία του διαδικτύου που έπρεπε να χρησιμοποιήσεις Flash αν ήθελες να προσθέσεις μερικά οπτικά εφέ στην ιστοσελίδα σου πέρα από ένα κινούμενο GIF. Φτάνοντας στο σήμερα βρίσκουμε το Flash νεκρό και πράγματα όπως τα CSS3 και HTML5 να φέρνουν φανταστικές κινούμενες εικόνες και εφέ στο διαδίκτυο.

Αν θέλετε να προσθέσετε μερικά εξαιρετικά CSS animations στην ιστοσελίδα σας ή στο επόμενο διαδικτυακό σας project, ορίστε μια λίστα από τα 20 καλύτερα CSS animations στο CodeCanyon για να ξεκινήσετε:

1. Aero - CSS3 Hover Effects

Προσθέστε μερικά εφέ σκιασμένου γυαλιού στην εικόνα σαν να αιωρείται με το Aero - CSS3 Hover Effects.

Είναι πλήρως προσαρμόσιμο και εύκολο στη χρήση, και επίσης θα το βρείτε:

εύκολο στην αλλαγή χρώματος και αλλαγή από κύκλο σε τετράγωνο
συμβατό με όλους τους browsers -- ακόμα και με τον Microsoft Edge
συμβατό με SASS
προσαρμόσιμο CSS
και άλλα!

Με τα 10 εφέ που περιλαμβάνονται σε αυτήν την έκδοση και ακόμα περισσότερα εφέ στο δρόμο, το Aero - CSS3 Hover Effects είναι ένα αξιόλογο σύνολο CSS animations για τα εφέ αιώρησης των εικόνων σας.

2. MegaHover Mouse Over Effects

Το MegaHover Mouse Over Effects προσφέρει μια στιβαρή επιλογή από CSS3 εφέ αιώρησης εικόνας που είναι συμβατά με το Bootstrap 3.

Επίσης:

χρησιμοποιεί εικονίδια Font Awesome
είναι συμβατό με όλους τους browsers
πλήρως responsive
και άλλα

Ενσωματώστε εύκολα και τροποποιήστε το MegaHover Mouse Over Effects σε εκατοντάδες όμορφα εφέ αιώρησης.

3. Animatia - CSS Image Hover Effects

Εύκολο στη χρήση, ελάχιστος χρόνος φόρτωσης, εξαιρετικά προσαρμόσιμο; Το Animatia - CSS Image Hover Effects είναι όλα αυτά και ακόμα περισσότερα.

Αυτό το σύνολο από CSS περιλαμβάνει:

πάνω από 115 ιδιαίτερα εξατομικεύσιμα εφέ αιώρησης
πλήρως responsive και εύκολα στη χρήση αρχεία
καθαρό CSS3 και εικονίδια Font Awesome
και άλλα

Χρησιμοποιήστε το Animatia - CSS Image Hover Effects για στυλ κουμπιών, εφέ overlay, λεζάντες και άλλα CSS animations.

4. Hover Effects Framework

To Hover Effects Framework είναι μια πολύ αποτελεσματική λύση για CSS animations.

Καθαρός κώδικας, πλήρως responsive, και:

IcoMoon Ultimate Font
4 σχήματα και 5 χρώματα
50+ animations
και άλλα

Το Hover Effects Framework έχει καθαρό κώδικα, και το καλύτερο από όλα, περιλαμβάνει πολλά παραδείγματα για να αρχίσετε με μερικά όμορφα CSS animations.

5. Collection of Preloaders

Μπορείτε να μη χρειαστείτε άλλη συλλογή από εικόνες προφόρτωσης αφού πάρετε το Collection of Preloaders.

Θα λάβετε:

καλή τεκμηρίωση χρήσης για εύκολη προσαρμογή
ένα ελαφρύ και ευέλικτο σύνολο από CSS3 animations
27 μοναδικά preloaders

Πλήρως φιλικά προς κινητά, το Collection of Preloaders είναι μια εξαιρετική προσθήκη στην CSS3 εργαλειοθήκη του κάθε προγραμματιστή.

6. CSS3 Image Hover Effects

Αν έχετε δει ένα CSS animation για εφέ αιώρησης σε εικόνα, τα έχετε δει όλα, σωστά;

Όχι ακριβώς.

Το CSS3 Image Hover Effects περιλαμβάνει μερικά πολύ όμορφα και μοναδικά εφέ.

Περιλαμβάνει:

22 διαφορετικά CSS3 εφέ αιώρησης εικόνας
πλήρως εντυπωσιακό και responsive
καθαρός CSS3 κώδικας
και άλλα

Δείτε το CSS3 Image Hover Effects που είναι συμβατό με το Bootstrap

7. Image Hover CSS Library

Το Image Hover CSS Library είναι μια κλιμακούμενη, ελαφριά βιβλιοθήκη από CSS animation για εφέ αιώρησης εικόνων που αξίζει να γνωρίσετε.

Αυτή είναι μια ποιοτική συλλογή από 58 κλάσεις εφέ αιώρησης, που ελαχιστοποιείται σε κάτω από 25 KB.

λειτουργεί με οποιοδήποτε περιεχόμενο προς αιώρηση
μοναδικά εφέ αιώρησης
εύκολο στη χρήση
και άλλα

Είναι δύσκολο να ξεχωρίσετε από άλλα CSS animations για αιώρηση σε εικόνες αλλά το Image Hover CSS Library το έχει κάνει.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Είναι ωραίο να ξεφεύγουμε από τη συνήθη animations CSS — εφέ αιώρησης εικόνας — και να βλέπουμε κάτι σαν το SVG Logo Scroll Animation | CSS3 and Javascript.

Σε κάτι λιγότερο από 4k, προσθέτει μερικά όμορφα SVG animations κύλισης σελίδας.

Δημιουργήστε μερικά όμορφα animations σελίδας με το SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

To Viavi CSS3 Scroll Effects είναι μια πολύ όμορφη λύση για CSS3 HTML animation κύλισης.

Μερικά από τα χαρακτηριστικά περιλαμβάνουν:

16 CSS 3 εφέ κύλισης
απλή υλοποίηση
πλήρως responsive
και άλλα

Χρησιμοποιώντας ένα σύστημα πλέγματος και ενεργοποιημένη αφή για χρήση σε κινητά, το Viavi CSS3 Scroll Effects όχι μόνο φαίνεται καλό, αλλά είναι επίσης καλά υλοποιημένο.

10. CSS3 Spinners & Loaders

Χρειάζεστε loaders χωρίς τη χρήση gifs;

Κανένα πρόβλημα. Το CSS3 Spinners & Loaders είναι αυτό που ψάχνετε.

βρείτε πάνω από 25 παραλλαγές
εύκολο στην παραμετροποίηση
εύκολο στην επέκταση

Το CSS3 Spinners & Loaders είναι καλά τεκμηριωμένο και είναι μια πλήρης λύση CSS για spinners και loaders.

11. Midix - CSS3 Animation Effects without jQuery

Χρησιμοποιώντας καθαρό CSS3, το Midix - CSS3 Animation Effects without jQuery προσφέρει ένα σύνολο από 16 CSS animations.

Μπορείτε να προσαρμόσετε το:

ταχύτητα κίνησης
καθυστέρηση κίνησης
χρώματα εικονιδίων

Με το Midix - CSS3 Animation Effects without jQuery, θα λάβετε όχι μόνο μια υπέροχη συλλογή από CSS animations αλλά επίσης δωρεάν ενημερώσεις και φιλική υποστήριξη.

12. CSS3 Hover Effects

Το CSS3 Hover Effects είναι άλλη μια καλή επιλογή.

Μπορείτε εύκολα να αλλάξετε:

χρώμα
μέγεθος περιγράμματος
κύκλο σε τετράγωνο
απόσταση μεταξύ των μπλοκ κειμένου

Με 479 εικόνες retina και 20 διαφορετικά εφέ, το CSS3 Hover Effects είναι ένας εξαιρετικός πόρος για να χρησιμοποιήσετε.

13. VSPreloader - Ultimate CSS Animated Preloaders

Όσον αφορά στους κινούμενους preloaders, το VSPreloader - Ultimate CSS Animated Preloaders είναι μια από τις πιο ιδιαίτερες, δημιουργικές και όμορφες λύσεις που πρόκειται να βρείτε.

Tα χαρακτηριστικά περιλαμβάνουν:

60 helpers
40 presents
30 animations
απεριόριστα χρώματα

Είναι επίσης εξαιρετικά καθαρό και μοναδικό.

Ρίξτε μια καλύτερη ματιά στο VSPreloader - Ultimate CSS Animated Preloaders. Νομίζω ότι θα σας εντυπωσιάσει.

14. Heed - Pure CSS3 Animation Effects

To Heed - Pure CSS3 Animation Effects σας προσφέρει ότι χρειάζεστε σε μια συλλογή από CSS animations.

Είναι εύκολο να το εγκαταστήσετε, να το επεξεργαστείτε και να το ρυθμίσετε με SCSS (το αρχείο περιλαμβάνεται).

20 επιλογές χρώματος material design
εικονίδια Font Awesome
15 εφέ
και άλλα

Το Heed - Pure CSS3 Animation Effects είναι φιλικό προς retina, φιλικό προς υποστήριξη και περιλαμβάνει δωρεάν ενημερώσεις.

15. Ayan - CSS3 Link Hover Effects

Ενώ πολλά από τα CSS animations που βρίσκετε εστιάζουν σε εφέ εικόνων και σελίδων, το Ayan - CSS3 Link Hover Effects, παρέχει μια εντυπωσιακή σειρά από εφέ αιώρησης συνδέσμων.

Θα βρείτε 30 όμορφα CSS3 εφέ αιώρησης συνδέσμων και:

σταθερή συμβατότητα με browsers
τεκμηρίωση βοήθειας
σύγχρονα animations
και άλλα

Το Ayan - CSS3 Link Hover Effects είναι δημιουργικό, καθαρό, και προσθέτει μια ωραία πινελιά από CSS animations χωρίς να είναι υπερβολικά φανταχτερό.

16. Sinister - Pure CSS Image Hover Effects

Περιέχοντας πάνω από 100 εφέ αιώρησης, το Sinister - Pure CSS Image Hover Effects προσφέρει ένα εντυπωσιακό αριθμό καλοσχεδιασμένων εφέ.

Περιλαμβάνει περισσότερα από:

22 εφέ μετάβασης περιεχομένου
18 εφέ μετάβασης overlay
23 εφέ μετάβασης κουμπιού
100 εφέ αιώρησης

Χωρίς τη χρήση JavaScript ή jQuery, και χρησιμοποιώντας καθαρό CSS, το Sinister - Pure CSS Image Hover Effects παρουσιάζει:

zoom-in και zoom-out
περιστροφή στον Χ και περιστροφή στον Υ
περιστροφή δεξιά και αριστερά
περιστροφή και κλιμάκωση
κυβική μετάβαση
αιώρηση επιπέδου
και άλλα

17. Stylish Social Media Animated Icons Style

Προσθέστε μερικά ωραία CSS animations στα εικονίδια μέσων κοινωνικής δικτύωσης εικονίδια με το Stylish Social Media Animated Icons Style.

Με μια καθαρή σχεδίαση και εννέα διαφορετικά στυλ για να διαλέξετε, θα απολαύσετε επίσης:

εύκολη υλοποίηση και προσαρμογή
σταθερή βάση κώδικα και τεκμηρίωση
καμία εξάρτηση από εικόνες ή εικονίδια
συμβατότητα με όλους τους browsers
και άλλα

Το Stylish Social Media Animated Icons Style προσθέτει μια όμορφη πινελιά από χρώμα και CSS animation στα εικονίδια των μέσων κοινωνικής δικτύωσής σας.

18. CSS3 Animations

Ζωντανέψτε εύκολα το div, p, και το body στην HTML με το CSS3 Animations.

Αυτό είναι ένα ωραίο απόσπασμα που μπορεί να χρησιμοποιηθεί και να εφαρμοστεί σε πολλές περιπτώσεις με διαφορετικό σχεδιασμό.

Tα χαρακτηριστικά περιλαμβάνουν:

εύκολο στη χρήση και παραμετροποίηση
μόνο CSS3, όχι JavaScript
10+ animations

Θα προσθέσετε το CSS3 Animations στην σχεδιαστική εργαλειοθήκη σας;

19. Pure CSS3 Image Accordion

Κατασκευάστε το δικό σας slider ή κάτι παρόμοιo χρησιμοποιώντας το Pure CSS3 Image Accordion για μερικά όμορφα CSS animations.

Είναι:

πλήρως responsive
δεν έχει σταθερό πλάτος
τέσσερις επιλογές από λεζάντες
εύκολο στην παραμετροποίηση

Δημιουργήστε οπτική μουσική με το Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Βαρεθήκατε τα απλά tooltips;

Προσθέστε λίγη μαγεία από CSS animation χρησιμοποιώντας το CSS3 Mega Tooltip Animation Pack.

Αυτό το πακέτο από CSS animations για tooltips περιλαμβάνει:

10 εφέ κίνησης
8 προκαθορισμένα χρώματα
τεκμηρίωση
και άλλα

Το CSS3 Mega Tooltip Animation Pack περιέχει επίσης και μια εναλλακτική για τον Internet Explorer.

Συμπέρασμα

Ακόμα και με πολλά διαφορετικά CSS animations διαθέσιμα στην Envato Market, ίσως ακόμα δεν έχετε βρει ακριβώς αυτό που ψάχνετε.

Κανένα πρόβλημα. Μπορείτε να δημιουργήσετε το δικό σας!

Δείτε τα Envato eBooks όπως το Mastering CSS3, ακολουθήστε κάποιο από τα μαθήματα για συγγραφή κώδικα που προσφέρονται, ή βρείτε και ακολουθήστε το εξαιρετικό CSS3 Code Tutorial.