1
A
回答
3
如果你能得到一個div來擴展你想覆蓋的距離,該解決方案可以工作:
設置2級的動畫,一個是水平軸,另一個爲縱座標
.container {
width: 400px;
height: 100px;
border: solid 1px blue;
position: relative;
}
.container:nth-child(2) {
width: 800px;
}
.inner {
width: 25px;
height: 25px;
background-color: green;
border-radius: 100%;
animation-name: arctop, arcleft;
animation-duration: 2s, 2s;
animation-timing-function: linear, linear;
animation-iteration-count: infinite, infinite;
position: absolute;
}
@keyframes arctop {
0% {top: 75px; animation-timing-function: ease-out;}
50% {top: 0px; animation-timing-function: ease-in;}
100% {top: 75px;}
}
@keyframes arcleft {
0% {left: 0px;}
100% {left: calc(100% - 25px)}
}
<div class="container">
<div class="inner"></div>
</div>
<div class="container">
<div class="inner"></div>
</div>
+0
謝謝,我永遠不知道我可以在元素上使用多個動畫。非常感謝您的回答! @vals –
+0
幸福,它幫助!但是瀏覽器對多動畫的支持並不是很好,所以你可能想要創建一箇中間元素,併爲每一個動畫賦一個動畫。 – vals
相關問題
- 1. OpenGL:在兩個元素之間畫線
- 2. 使用多個css3動畫元素
- 3. CSS3動畫越野車在Safari之後與之前的元素
- 4. 添加兩個CSS3動畫?
- 5. JQuery。在懸停的兩個元素(一個動畫)之間移動?
- 6. 兩個3d矢量之間的弧線
- 7. 兩個活動之間的動畫
- 8. 兩個活動之間的動畫
- 9. 畫布中圓弧之間的空間
- 10. 水平滑動動畫在一個和兩個元素之間切換 - AngularJS
- 11. 如何在兩個動畫畫布元素之間進行通信?
- 12. 如何動態地在兩個元素之間插入元素?
- 13. 爲同一元素調用兩次的CSS3動畫
- 14. 使用共享元素轉換與ChangeImageTransform兩個活動之間的動畫ImageView
- 15. 在CSS3翻譯動畫之後獲取元素的新位置?
- 16. 通過CSS3轉換動畫SVG元素
- 17. CSS3動畫觸發其他DOM元素
- 18. css3同步多元素動畫
- 19. CSS3當動畫時忽略子元素
- 20. 爲什麼畫布在圓弧(圓弧)之間畫線?
- 21. 的jQuery - 動畫兩個元素一舉
- 22. 如何在CSS3動畫的中間顯示元素
- 23. 動畫之間的兩個UITextviews
- 24. 兩個UIWebView之間的翻轉動畫
- 25. 兩個UIViews之間的動畫
- 26. 兩個元素之間的XPath
- 27. 兩個元素之間的箭頭
- 28. 兩個容器之間的元素
- 29. CSS3動畫 - 在動畫元素的「底部」更改圖像
- 30. CSS3動畫:動畫之間的轉換速度太慢
嘗試google..you會得到一切。 –
相信我我試過 - 沒有得到這個具體問題的答案。如果您有很好的鏈接,歡迎與我分享。 –
您可以添加您通過jsfiddle或plunker嘗試過的代碼嗎? – johannesMatevosyan