Wie zeige ich div mit CSS-Übergang basierend auf der Bildschirmgröße an?

Question

Mein DIV mit einer Klasse ist ausgeblendet, bis die Browsergröße 1.000px Breite ist.

Wie stelle ich ein DIV ein, sobald die Browsergröße es mit CSS erscheinen lässt?

Hier ist mein aktueller Code. Es funktioniert nicht.

Vielen Dank für jede Hilfe.

.instaWRAP { 
    display: none; 
    opacity:0; 
    transition:opacity 5s linear;* 
} 

@media only screen and (max-width: 1000px) { 
    .instaWRAP {display: inline} 
} 

Answer 1

Verwenden Sie diesen Code in Ihre Medienabfrage:

-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; } 
}