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动画越野车在Safari之后与之前的元素
- 3. 两个3d矢量之间的弧线
- 4. 画布中圆弧之间的空间
- 5. 两个活动之间的动画
- 6. 水平滑动动画在一个和两个元素之间切换 - AngularJS
- 7. 如何在两个动画画布元素之间进行通信?
- 8. 为同一元素调用两次的CSS3动画
- 9. 在CSS3翻译动画之后获取元素的新位置?
- 10. 使用共享元素转换与ChangeImageTransform两个活动之间的动画ImageView
- 11. 如何动态地在两个元素之间插入元素?
- 12. CSS3动画触发其他DOM元素
- 13. 如何在CSS3动画的中间显示元素
- 14. 两个UIViews之间的动画
- 15. 两个容器之间的元素
- 16. 两个元素之间的箭头
- 17. 两个元素之间的XPath
- 18. CSS3动画 - 在动画元素的“底部”更改图像
- 19. 如何将两个浮动元素之间的浮动元素完美居中?
- 20. CSS3动画
- 21. 调整两个元素之间元素的大小
- 22. 包装两个父元素之间的所有元素
- 23. 选择两个特定元素之间的所有元素
- 24. 如何找到jQuery中两个元素之间的元素?
- 25. Fllip动画两者之间的活动
- 26. 计算两个圆上两点之间的切线圆弧
- 27. CSS3动画问题
- 28. CSS3浮动动画
- 29. CSS3 Sprite动画无补间
- 30. 链接CSS3动画?
尝试google..you会得到一切。 –
相信我我试过 - 没有得到这个具体问题的答案。如果您有很好的链接,欢迎与我分享。 –
您可以添加您通过jsfiddle或plunker尝试过的代码吗? – johannesMatevosyan