大佬教程收集整理的这篇文章主要介绍了css – 在正弦路径上为元素设置动画,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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个不同的关键帧动画上下移动元素.这是一个例子:
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 – 在正弦路径上为元素设置动画全部内容,希望文章能够帮你解决css – 在正弦路径上为元素设置动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。