Медиа-запросы с CSS-анимацией - PullRequest
Новая
       22

Медиа-запросы с CSS-анимацией

4 голосов
/ 19 ноября 2011

Я пробую некоторые тяжелые CSS3 вещи здесь и сталкиваюсь с некоторыми проблемами, которые, я надеюсь, можно устранить:

1 - у меня есть окно, которое выдвигается при загрузке страницы.Скажем так: 

#box {
    animation-duration: 3.5s;  
    animation-name: slidein;
}

@keyframes slidein {  from { top: 0; }  to { top: 100%; }}

Однако в моем медиа-запросе из-за некоторого изменения размера мне нужно изменить это так: 

@media only screen and (min-width: 768px) {
    @keyframes slidein {  from { top: 0; }  to { top: 80%; }}
}

Я думал, что смогу сохранить имя анимации както же самое, и просто переопределите ключевые кадры внутри одного из запросов @media, однако это, похоже, не работает.Зачем?(Да, у меня установлены правильные префиксы)

2 - Мое решение, описанное выше, заключается в определении различных анимаций для каждого размера: 

#box {
    animation-duration: 3.5s;  
    animation-name: slidein;
}

@keyframes slidein {  from { top: 0; }  to { top: 100%; }}
@keyframes slidein-low {  from { top: 0; }  to { top: 80%; }}

@media only screen and (min-width: 768px) {
    #box { 
        animation-name: slidein-low;
   }
}

Однако СЕЙЧАС после изменения размера сайтаанимация начнется заново, как только она попадет на один из медиазапросов.Я хочу, чтобы анимация воспроизводилась только один раз (какого бы размера она ни была, и даже после изменения размера), и все.Так что, если нет решения № 1, я считаю, что это потому, что при обнаружении запроса он как бы «заново инициирует» CSS для него?

Ответы [ 2 ]

0 голосов
/ 31 января 2012

Из моих экспериментов я обнаружил, что Safari 5 (для настольных компьютеров и iOS) наверняка будет отображать вашу страницу так, как вы собираетесь использовать одно из ваших решений.Firefox 9, с другой стороны, не соответствует правилам @ -moz-keyframe или -moz-animation, если они размещены в блоках @media (и оба игнорируют свойства анимации W3C @keyframe и других производителей)

0 голосов
/ 21 ноября 2011

Я предполагаю, что вы делаете минимальную ширину для небольших экранов, которые могут иметь максимальную ширину 1024? Поэтому, возможно, попробуйте добавить это также: 

@media only screen and (min-width: 768px) and (max-width:1024px) {
    #box { 
        animation-name: slidein-low;
   }
}

Может быть, даже попытаться добавить в запрос и конструкцию анимации: 

@media only screen and (min-width: 768px) and (max-width:1024px) {

    @keyframes slidein-low {  from { top: 0; }  to { top: 80%; }}

    #box { 
        animation-name: slidein-low;
   }
}

Я уверен, что вы наткнулись на этот сайт, но на случай, если у вас его нет, вот хороший справочник для медиа-запросов:

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

...