Как DISPLAY div с переходом CSS на основе размера экрана?

Question

Мой DIV с классом скрыт до тех пор, пока размер браузера не станет шириной 1000 пикселей.

Как сделать DIV исчезать, как только размер браузера будет отображаться с помощью CSS?

Вот мой текущий код. Это не работает.

Благодарим за помощь.

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

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

Answer 1

Используйте этот код в медиа-запросе:

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