Отключить анимацию css при изменении ориентации

Question

Итак, я сделал две анимации для планшета, используя анимацию css и медиа-запрос.

Главное, что анимация делает анимированный div от вершины к центру в виде планшета и от левого к центру в планшете.

Когда страница загружается на портрете, она анимируется правильно сверху до центра. Но когда ориентация меняется на пейзаж, она запускает вторую анимацию слева направо. То же самое, если вначале оно находится в ландшафте.

Я хочу, чтобы анимация запускалась только один раз при загрузке страницы и не запускалась при каждом изменении ориентации.

Предпочтительно без javascript, только css.

Вот немного кода, как это работает:

@keyframes leftToCenter { 
    from { 
    margin-left: -100vw; 
    } 
    to { 
    margin-left: 0; 
    } 
} 
@keyframes topToCenter { 
    from { 
    margin-top: -100vh; 
    } 
    to { 
    margin-top: 0; 
    } 
} 
@media only screen and (orientation: portrait) { 
    .div { 
    animation-name: topToCenter; 
    animation-duration: 1s; 
    } 
} 
@media only screen and (orientation: landscape) { 
    .div { 
    animation-name: leftToCenter; 
    animation-duration: 1s; 
    } 
} 

Edit:

анимация не должно быть сделано с JQuery, это должно быть сделано только с помощью CSS анимации. Это требование.

Кроме того, анимация немного сложнее, я просто поставил ее самую простую версию.

Главное, что он работает только при загрузке страницы, а не при изменении ориентации.

Answer 1

Единственный способ, которым я могу думать, чтобы сделать это в чистом CSS предполагает использование одной анимации.

Таким образом, браузер обозревает анимацию, и она больше не будет запускать ее.

В одной ориентации мы будем использовать половину анимации, начиная с середины и заканчивая в конце.

В другой ориентации, мы начнем также в середине, но мы выполним его в обратном направлении и заканчивается в он начинает

@keyframes dual { 
 
    from { 
 
    margin-left: 0; 
 
    } 
 
    49.9% { 
 
    margin-left: -100vw; 
 
    margin-top: 0; 
 
    } 
 
    50% { 
 
    margin-left: 0; 
 
    margin-top: -100vh; 
 
    } 
 
    to { 
 
    margin-top: 0; 
 
    } 
 
} 
 
@media only screen and (orientation: portrait) { 
 
    .element { 
 
    animation-name: dual; 
 
    animation-duration: 2s; 
 
    animation-delay: -1s; 
 
    } 
 
} 
 
@media only screen and (orientation: landscape) { 
 
    .element { 
 
    animation-name: dual; 
 
    animation-duration: 2s; 
 
    animation-delay: -1s; 
 
    animation-direction: reverse; 
 
    } 
 
} 
 

 
.element { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
}

<div class="element"></div>

Answer 2

Существует, вероятно, CSS способ сделать это, но это очень легко создать эффект, используя JQuery:

$(document).ready(function(){ 
$('#yourdiv').show().animate({top:'50%'},1000); 
}); 

Просто установите стиль # yourdiv в этом пути для того, чтобы центрировать его, когда позиция является абсолютной:

display: none; 
    position: absolute; 
    z-index: 100000; /* on top of all others element */ 
    top: -50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 

Эффект будет возникать только в том случае, если страница обновлена.

Вы даже можете добавить Иным ДИВ называется shadow, чтобы сделать его еще лучше смотреть :)

Answer 3

В случае кто интересуется, я нашел другую решение этой проблемы.

Вы должны перенести объявление ключевых кадров внутри медиа-запроса и дать им то же имя.Таким образом, правильная анимация по-прежнему запускается, когда это необходимо, и поскольку у них одинаковое имя, счет анимации увеличивается до 1 после первой анимации и больше не будет запускаться после изменения ориентации.

@media only screen and (orientation: portrait) { 
@keyframes animation{ 
    from { 
    margin-top: -100vh; 
    } 
    to { 
    margin-top: 0; 
    } 
} 
.div { 
    animation-name: animation; 
    animation-duration: 1s; 
    } 
} 
@media only screen and (orientation: landscape) { 
@keyframes animation{ 
    from { 
    margin-left: -100vw; 
    } 
    to { 
    margin-left: 0; 
    } 
} 
    .div { 
    animation-name: animation; 
    animation-duration: 1s; 
    } 
}