Πώς να δημιουργήσετε κινούμενα σχέδια κλειδιών CSS

Πώς να δημιουργήσετε κινούμενα σχέδια κλειδιών CSS

Το CSS δίνει στους προγραμματιστές τη δυνατότητα να ζωντανέψουν τις ιστοσελίδες τους χρησιμοποιώντας κινούμενα σχέδια καρέ.





Η κίνηση CSS επιτυγχάνεται μεταβάλλοντας την αρχική κατάσταση ενός στοιχείου HTML μέσω των διαφόρων ιδιοτήτων του. Ορισμένες γενικές ιδιότητες CSS που μπορούν να κινούνται περιλαμβάνουν:



δείτε δωρεάν ταινίες στο διαδίκτυο χωρίς εγγραφή
  • Πλάτος
  • Υψος
  • Θέση
  • Χρώμα
  • Αδιαφάνεια

Αυτές οι γενικές ιδιότητες CSS χειρίζονται από συγκεκριμένα στοιχεία CSS για να δημιουργήσουν το επιθυμητό αποτέλεσμα. Εάν έχετε συναντήσει ποτέ ένα κινούμενο στοιχείο σε μια ιστοσελίδα, οι πιθανότητες είναι ότι το στοιχείο κινήθηκε χρησιμοποιώντας κινούμενα σχέδια καρέ.





Τι είναι ένα στοιχείο Keyframes;

ο στοιχείο keyframes μπορεί να χρησιμοποιηθεί σε ένα ή περισσότερα στοιχεία HTML στα οποία έχει πρόσβαση. Προσδιορίζει ένα συγκεκριμένο σημείο στην κατάσταση ενός στοιχείου και υπαγορεύει την εμφάνιση που πρέπει να έχει αυτό το στοιχείο αυτή τη στιγμή.

Αυτό μπορεί να ακούγεται πολύ χωνευτικό, αλλά στην πραγματικότητα είναι αρκετά απλό. ο στοιχείο keyframes έχει μια αρκετά απλή δομή που μπορεί εύκολα να κατανοηθεί και να προσαρμοστεί ώστε να ταιριάζει σε όλες τις απαιτήσεις κινούμενων σχεδίων.



Παράδειγμα δομής βασικών πλαισίων


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Ας υποθέσουμε ότι θέλετε να ζωντανέψετε ένα πράσινο ορθογώνιο κουμπί μετατρέποντάς το σε ένα μπλε στρογγυλό κουμπί.

Μέσα στις παραμέτρους του από παραπάνω ενότητα θα χρειαστεί να τοποθετήσετε όλο το στυλ που απαιτείται για να έχει το στοιχείο να μοιάζει με πράσινο ορθογώνιο κουμπί, στη συνέχεια στο προς το ενότητα, θα τοποθετήσετε όλες τις απαιτήσεις στυλ για να μετατρέψετε αυτό το κουμπί σε μπλε στρογγυλό κουμπί.



Αν σκέφτεστε, αυτό δεν μοιάζει πολύ με κίνηση. Λοιπόν, αυτό συμβαίνει επειδή ένα βασικό συστατικό όλης αυτής της διαδικασίας δεν έχει ακόμη εισαχθεί --- αυτό το στοιχείο είναι η ιδιότητα κινούμενων σχεδίων.

Η ιδιότητα κινούμενων σχεδίων

ο ιδιότητα κινούμενων σχεδίων έχει ένα σύνολο διαφορετικών υπο-ιδιοτήτων. Αυτά χρησιμοποιούνται σε συνδυασμό με τη δομή των πλαισίων παραπάνω για να ζωντανέψουν το επιθυμητό στοιχείο HTML.



Ωστόσο, χρειάζεται μόνο να γνωρίζετε πέντε από αυτές τις υπο-ιδιότητες και τις τιμές που σχετίζονται με αυτές, για να επιτύχετε κινούμενα σχέδια στα έργα σας. Αυτές οι ιδιότητες είναι γνωστές ως:

  • Όνομα κινουμένων σχεδίων
  • Κινούμενα σχέδια-διάρκεια
  • Λειτουργία animation-timing-
  • Κινούμενα σχέδια-καθυστέρηση
  • Animation-iteration-count

Χρήση κινούμενων σχεδίων σε μια ιστοσελίδα

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

Παράδειγμα κινούμενων εικόνων κουμπιού







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Η ενότητα κινούμενων εικόνων του παραπάνω κώδικα περιέχει τις πέντε υπο-ιδιότητες που αναφέρθηκαν νωρίτερα. Κάθε ιδιότητα έχει μια πολύ διακριτή λειτουργία και μαζί λειτουργούν για να ζωντανεύουν οποιοδήποτε στοιχείο HTML στο οποίο προορίζονται.

Σχετικά: Πώς να στοχεύσετε μέρος μιας ιστοσελίδας χρησιμοποιώντας επιλογείς CSS

Ιδιότητα Animation-name

Αυτή η ιδιότητα είναι η πιο σημαντική ιδιότητα στη λίστα. Χωρίς το ιδιότητα animation-name , δεν θα έχετε αναγνωριστικό στο παρελθόν στο στοιχείο keyframes , καθιστώντας άχρηστο όλο τον κώδικα εντός των παραμέτρων του.

Εάν ξεχάσατε να συμπεριλάβετε μία ή δύο από τις άλλες υπο-ιδιότητες, τότε ενδέχεται να έχετε μια αρκετά αξιοπρεπή κίνηση. Ωστόσο, εάν ξεχάσατε το ιδιότητα animation-name δεν θα έχετε κινούμενα σχέδια.

Ιδιότητα κινούμενης εικόνας-διάρκεια

Αυτή η ιδιότητα χρησιμοποιείται για τον καθορισμό του χρόνου που χρειάζεται ένα κινούμενο στοιχείο κατά τη μετάβαση από τη μία κατάσταση στην άλλη.

Στο παραπάνω παράδειγμα, το ιδιότητα διάρκειας κινούμενης εικόνας έχει οριστεί σε 5 δευτερόλεπτα (5 δευτερόλεπτα), οπότε το πράσινο ορθογώνιο κουμπί θα έχει συνολικά 5 δευτερόλεπτα προτού γίνει πλήρως ένα μπλε στρογγυλό κουμπί.

Η ιδιότητα Animation-delay

Αυτή η ιδιότητα είναι σημαντική για έναν λόγο. ορισμένες ιστοσελίδες ενδέχεται να χρειαστούν μερικά δευτερόλεπτα για να φορτωθούν πλήρως (λόγω πολλών διαφορετικών παραγόντων). Ετσι το ιδιότητα καθυστέρησης κίνησης εμποδίζει την άμεση έναρξη της κινούμενης εικόνας σε περίπτωση που η φόρτωση της ιστοσελίδας απαιτεί λίγο χρόνο.

Στο παραπάνω παράδειγμα, το ιδιότητα καθυστέρησης κίνησης έχει οριστεί σε 4s, πράγμα που σημαίνει ότι η κίνηση δεν θα ξεκινήσει παρά μόνο 4 δευτερόλεπτα μετά την επίσκεψη της ιστοσελίδας (δίνοντας αρκετό χρόνο στην ιστοσελίδα για φόρτωση πριν ξεκινήσει η κίνηση).

Η ιδιότητα Animation-iteration-count

Αυτή η ιδιότητα αναφέρει πόσες φορές το κινούμενο στοιχείο πρέπει να μεταβεί από τη μία κατάσταση στην άλλη. ο ιδιότητα animation-iteration-count λαμβάνει τιμές που είναι λέξεις και αριθμοί. Η τιμή του αριθμού μπορεί να είναι οτιδήποτε από 1 και πάνω, ενώ η τιμή της λέξης είναι συνήθως άπειρος Το

Στο παραπάνω παράδειγμα, το animation-iteration-count value Έχει οριστεί άπειρος , πράγμα που σημαίνει ότι όσο είναι ανοικτή η ιστοσελίδα η ιδιότητα κουμπιού θα ζωντανεύει από τη μια κατάσταση στην άλλη, συνεχώς.

Η ιδιότητα Animation-timing-function

Αυτή η ιδιότητα υπαγορεύει την κίνηση του κινούμενου στοιχείου καθώς μεταβαίνει από τη μία κατάσταση στην άλλη. ο ιδιότητα animation-timing-function συνήθως αποδίδεται μία από τις τρεις τιμές ευκολίας.

  • Ευκολία
  • Ευκολία
  • Ευκολία-έξοδος

ο αξία ευκολίας εισόδου χρησιμοποιείται παραπάνω? αυτό μεταφέρει σιγά σιγά την κίνηση από τη μία κατάσταση στην άλλη. Εάν ο στόχος είναι να δημιουργηθεί μια αργή μετάβαση όταν το κουμπί μετατρέπεται από πράσινο ορθογώνιο σε μπλε κύκλο, θα χρησιμοποιούσατε το ευκολία στην αξία Το Αν θέλατε μόνο την αργή μετάβαση προς την αντίθετη κατεύθυνση, θα χρησιμοποιούσατε το αξία απαλλαγής Το

Μείωση του κώδικα μας

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

Ο παραπάνω κώδικας μπορεί να μειωθεί κατά τέσσερις γραμμές. Αυτό μπορεί να επιτευχθεί με απλή χρήση της ιδιότητας κινούμενης εικόνας χωρίς να προσδιορίζεται ρητά κάθε μία από τις υπο-ιδιότητες της.

Μείωση του κώδικα για το παράδειγμα κινούμενων εικόνων κουμπιού







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}