關閉取向變化的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; 
    } 
} 

編輯：

動畫不得使用jQuery做，它應該只用CSS動畫來完成。這是要求。

此外，動畫有點複雜，我只是把它的最簡單的版本放在這裏。

最主要的是它只在頁面加載時運行，而不是在方向改變時運行。

Answer 1

，我能想到的做，在純CSS涉及使用一個動畫的唯一途徑。

這種方式瀏覽器asumes動畫已完成，並不會再次觸發它。

在一個方向上，我們將使用一半的動畫，從中間開始到結束。

在其他方向，我們也將開始在中間，但我們會在反向執行它，並最終在他開始

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