防止在不同屏幕大小的不同屏幕上播放動畫（具有相同的動畫效果）

我有一個使用三個屏幕的着陸頁。三個中只有一個div被設置爲以任何特定的屏幕尺寸顯示。每個div使用媒體查詢以特定的屏幕大小加載。防止在不同屏幕大小的不同屏幕上播放動畫（具有相同的動畫效果）

Div1構成--->高達800像素寬度

Div2的--->之間801px到1400px寬度

DIV3 --->以上1400px寬度

每次頁面加載的背景圖像在我的div從黑白圖像變爲使用CSS濾鏡的彩色圖像

當我調整窗口大小時出現問題。例如，將窗口大小調整爲較小的屏幕尺寸/窗口大小; Div2被設置爲顯示：無，Div1現在可見。因爲div加載後，它會再次加載黑色和白色以着色CSS濾鏡效果。然而，這種效果只能在頁面加載期間播放一次，而不是在瀏覽器被調整大小或者我的iPad被旋轉時（屏幕寬度增加）。

任何人都可以爲我推薦一個解決方案。我正在考慮在特定的時間（從頁面加載到播放背景動畫的時間）之後阻止任何動畫播放。任何人都可以指導我如何做到這一點或幫助更好的解決方案

來源

2016-11-20 Shaminder Ossan

您是否嘗試過使用CSS媒體查詢？ – NewToJS

歡迎來到SO。如果你顯示你的代碼，幫助你更容易。 – henrikstroem

也許使用媒體查詢會有一些用處？我相信你可以玩這個也許找到一種方法來清理它，但不是一個例子http://codepen.io/anon/pen/vygvjW – NewToJS

一種方法可以是在父元素上添加一個CSS類.animate，並在CSS過濾器過渡結束後刪除該類。這可以通過transitionend事件完成。更多關於它的地方：https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ 然後，在你的CSS中，你可以在.animate .div1 {...}選擇器上創建CSS濾鏡效果。

來源

2016-11-20 11:18:33 Giedrius

謝謝你。我已經有了一個名爲「animame」的父容器，並且我已經使用一個腳本來加載頁面加載時的動畫。但是我的核心力量就是CSS。你能告訴我如何在下面的腳本中添加它（用於在頁面啓動時加載）。有一種方法可以在4秒後將類添加回來，因爲所有的動畫結束了。我已經用於aninamtion集CSS爲無類aniname –

防止在不同屏幕大小的不同屏幕上播放動畫（具有相同的動畫效果）

回答

相關問題