2016-07-28 5 views
0

Мой DIV с классом скрыт до тех пор, пока размер браузера не станет шириной 1000 пикселей.Как DISPLAY div с переходом CSS на основе размера экрана?

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

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

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

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

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

В вашем CSS 'opacity' никогда не изменилось, так что нет никакого перехода. И, кстати, 'display' не является анимационным свойством, не пытайтесь его перевести. – Leo

ответ

0

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

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

Где это положить? Это делает все глобальным? Я только хочу это для класса .instaWRAP. – Erik

+0

Да, это будет работать во всем мире. Но только тогда, когда вы используете 'animation: fadein', вы можете изменить имя и назвать его' instaWRAP' или что-то подобное. Вы должны поместить его каждый раз в файл CSS. Первые 5 строк должны быть в этом медиапроцессе '.instaWRAP'. –

 Смежные вопросы

  • Нет связанных вопросов^_^