CSS animations έτοιμα για αντιγραφή

Πολλοί ειδικοί του CSS κώδικα χρησιμοποιούν (και συνιστούν) τη χρήση μικρών animations που εφιστούν την προσοχή του χρήστη και δίνουν μια επιπλέον αισθητική διάσταση στην ιστοσελίδα που δημιουργούμε.

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

Για παράδειγμα, το δεύτερο κουμπί στην ενότητα Buttons έχει “πίσω” του τον παρακάτω κώδικα CSS:

.buttonLeft {
    height: 40px;
    padding: 0 14px;
    overflow: hidden;
    background: #474E51;
    position: relative;
    line-height: 40px;
    color: #fff;
}

.buttonLeft::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background: #5778F3;
    transition: transform .2s ease-in-out;
}

.buttonLeft:hover::before {
    transform: translateX(0);
}

.buttonLeft span {
    position: relative;
    z-index: 1;
}