css-animations

0熱度

1回答

在Android WebView中加載時CSS關鍵幀動畫無法工作（IONIC 2）

我有一個Ionic 2項目，需要嚮應用程序提供一些簡單的動畫。我正在使用CSS中的關鍵幀進行動畫製作，並且在iOS和瀏覽器中都可以正常工作，但在Android中，在部分較新的設備上部分工作有毛刺，而在Nexus 5上它根本不起作用。我使用這兩種-webkit-和標準關鍵幀運行的動畫，所以我有點失去了什麼我做錯了。這裏是我的代碼： .throw-object-plastic { ani

0熱度

3回答

淡入/淡出多幅圖像與jQuery

我是新來使用jQuery動畫，和我完全失去了試圖創建下面的動畫：我想ONE CUBE在時間淡入 8秒左右，然後淡出作爲第二個立方體淡入，這有繼續爲所有8個方塊一遍又一遍。注：應該有隻有一個立方體在同一時間可見。我在jQuery中沒有做到這一點，但你可以看看我的小提琴，看看你是否可以糾正我的代碼，按照上面的說明，甚至可以簡化JQuery。如果您發現它是更好的解決方案，我也會接受CSS3動畫

0熱度

1回答

Angular2動畫旋轉方向？

我在Angular2中有一個菜單圖標，它應該總是順時針旋轉。顯示時，應從-360度旋轉至-180度。隱藏時，應該從-180度旋轉到0度。但是通過這個動畫設置，它將逆時針旋轉，並將過渡狀態'hide'變爲'show'。我怎樣才能讓它順時針旋轉？ export const MenuButtonAnimation = trigger('menuState', [ state('hide

1熱度

1回答

SVG繪圖 - 動畫後的形狀消失

我有一個動畫/繪製的形狀很好，當動畫完成後，形狀在頁面上保留幾秒鐘然後消失。第一次嘗試CSS動畫，所以不完全理解爲什麼它消失在頁面上，我知道這可能是一個非常明顯的東西，但任何幫助指針將不勝感激。 body { background-color: #fff; } svg { margin: auto; position: absolute

2熱度

3回答

如何在同步JavaScript運行時顯示CSS加載器

根據我自己的經驗，並且與this answer一致，在JavaScript代碼運行時，不會更改UI。例當我點擊一個按鈕，「運行腳本」，我想加載動畫出現，那麼我想一些JavaScript運行，並在JavaScript的運行完畢，我想加載動畫消失。我創建了a codepen here，其中（可預測）失敗。代碼的最相關的部分是： $('#run-script-btn').on('click', fu

9熱度

1回答

使用DOM背景層和關鍵幀動畫以及Canvas圖層爲物理引擎

在我的下一個遊戲中，我計劃將DOM背景圖層與其頂部的畫布混合在一起。我想移動非交互式的背景動畫到DOM層，並使用關鍵幀動畫的轉換和不透明度的變化，像中移動的雲，空中飛機等至於我有2個優點此：簡單的關鍵幀動畫更容易打造。恕我直言的最有趣的點 - 它應該提高性能： transform和opacity動畫可以是GPU加速和單獨的線程執行。我們不在渲染幀中執行這些動畫，所以我們在這裏保存一些毫秒

4熱度

2回答

ie11翻譯規模模糊圖像

我想創建一個氣球飛行的動畫。除了IE11之外，所有現代瀏覽器都是如此。我使用translateX和translateY沒有任何問題，但規模導致圖像變得模糊。 @media (min-width: 1100px) { \t .balloon-outer, \t .balloon-inner, \t .balloon { \t \t height: 100%; \t \

0熱度

1回答

角度2動畫平滑垂直打開和關閉塊

在我的角度2應用程序，我有組件與靜態頭和切換容器。我想爲打開和關閉內容塊添加流暢的動畫，但無法找到合適的轉換。現在我試圖用這個動畫： trigger('expandableState', [ transition(':enter', [ style({ transform: 'translateY(100%)', opacity: 0 }), animate(

0熱度

1回答

Div標記（動畫箭頭）不停留在頁面的左下角，正好在頁腳的上方

我希望我的彈跳箭頭始終保持在頁面的左下角（正好在頁腳的上方）當瀏覽器調整大小時。但是，當我調整瀏覽器的大小時，箭頭遍佈整個地方，並且不會固定在頁面的左下角。 #arrow { position: absolute; margin: auto; top: 60; bottom: 60; left: -7; right

-1熱度

4回答

旋轉時它的旋轉中心位置如何 - CSS動畫

我在css中創建了一個微調框，並且將它放置在沒有動畫的中心，但是當我開始動畫時，我的旋轉框移開。具體當我使用「@keyframes微調」規則。我如何保持中心位置？ .spinner-animation{ width: 500px; height: 500px; position: relative; background: gray;