Χρήση CSS για ένα εφέ fade-in κατά τη φόρτωση της σελίδας

Μπορούν να χρησιμοποιηθούν μεταβάσεις CSS για να επιτραπεί σε μια παράγραφο κειμένου να αναβοσβήνει κατά τη φόρτωση της σελίδας;

Μου αρέσει πολύ το πώς φαινόταν στο http://dotmailapp.com/ και θα ήθελα πολύ να χρησιμοποιήσω ένα παρόμοιο εφέ χρησιμοποιώντας CSS. Ο τομέας έχει πλέον αγοραστεί και δεν έχει πλέον το αναφερόμενο εφέ. Μπορείτε να δείτε ένα αρχειοθετημένο αντίγραφο στο Wayback Machine.

Εικονογράφηση

Έχοντας αυτή τη σήμανση:

<div id="test">
    <p>​This is a test</p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Με τον ακόλουθο κανόνα CSS:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}​

Πώς μπορεί να ενεργοποιηθεί η μετάβαση κατά τη φόρτωση;

Peter Mortensen
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2019 в 5:20
Προγραμματισμός
css opacity css-transitions
Κάνε Ιούλιος 2012 в 11:36
24 προβολές
Λύση

Μέθοδος 1:

3 Animations][1]. Ούτε αυτές υποστηρίζονται, αλλά αυτό ακριβώς είναι το είδος του πράγματος για το οποίο φτιάχτηκαν.

CSS

#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Demo

  • http://jsfiddle.net/SO_AMK/VV2ek/

Υποστήριξη προγράμματος περιήγησης

Όλα τα σύγχρονα προγράμματα περιήγησης και Internet Explorer 10 (και μεταγενέστερα): http://caniuse.com/#feat=css-animation

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2019 в 5:16
Σχόλια (15)

Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό HTML onload="" και να χρησιμοποιήσετε JavaScript για να ρυθμίσετε το στυλ αδιαφάνειας του στοιχείου σας.

Αφήστε το CSS σας όπως το προτείνατε. Επεξεργαστείτε τον κώδικα HTML σας ώστε:


    <div id="test">
        <p>​This is a test</p>
    </div>

Αυτό λειτουργεί επίσης για την εμφάνιση ολόκληρης της σελίδας όταν τελειώσει η φόρτωση:

HTML:

CSS:

body{ 
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; /* Safari */
}

Ελέγξτε την ιστοσελίδα W3Schools: μεταβάσεις και ένα άρθρο για την αλλαγή στυλ με JavaScript.

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2019 в 5:20
Σχόλια (1)

Σε απάντηση στην ερώτηση του @A.M.K's σχετικά με το πώς να κάνετε μεταβάσεις χωρίς jQuery. Ένα πολύ απλό παράδειγμα που έριξα μαζί. Αν είχα χρόνο να το σκεφτώ περισσότερο, ίσως να μπορούσα να εξαλείψω τον κώδικα JavaScript εντελώς:


    body {
        background-color: red;
        transition: background-color 2s ease-in;
    }


<script>
    window.onload = function() {
        document.body.style.backgroundColor = '#00f';
    }
</script>


    <p>test</p>
Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2019 в 5:18
Σχόλια (0)