我需要在正弦波或路径上移动元素,如上图所示。我做了一些东西。但它没有按我的意愿工作。
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">
最佳答案
您可以使用 2 CSS在正弦路径上移动元素 keyframe animations .重点是用线性 timing function 左右平移以及带有缓入缓出计时功能的上/下。
这需要平移容器并上下移动元素使用 2 个不同的关键帧动画。这是一个例子:
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>
请注意,此示例不包含供应商前缀。有关详细信息,请参阅可以用于:
关于css - 为正弦路径上的元素设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36618548/