在正弦路径上动画元素
在正弦路径上动画元素
提问于 2016-04-14 09:10:57
我需要在正弦波或路径上移动一个元素，如上图所示。我做了些东西。但这不是我想要的。
img {
position:absolute;
animation: roam infinite;
animation-duration: 15s;
}
@keyframes roam {
0% { left: 50px; top:100px }
10%{ left:100px; top:100px }
20%{ left:200px; top:200px }
30%{ left:300px; top:50px }
40%{ left:400px; top:200px }
}<img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png">
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-04-14 10:15:32
您可以使用2 CSS 在正弦路径上移动元素。重点是用一个线性定时函数和一个容易进入的定时函数来转换左/下。
这需要翻译容器，并用两个不同的关键帧动画上下移动元素。以下是一个例子：
div{
position:absolute;
left:0;
width:10%;
animation: translate 15s infinite linear;
}
img {
position:absolute;
animation: upDown 1.5s alternate infinite ease-in-out;
width:100%;
}
@keyframes upDown {
to { transform: translatey(100px);}
}
@keyframes translate {
to { transform: translatex(900%);}
}<div>
<img src="http://i.imgur.com/QdWJXta.png">
</div>
请注意，此示例不包含供应商前缀。有关更多信息，请参见canIuse：
- CSS关键帧动画
- CSS2D变换
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36618548
复制相关文章
相似问题
腾讯云开发者
