从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动。
水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴移动元素;以及linear:动画从头到尾的速度是相同的 这两个属性值来实现;
上下的匀变速运动可以利用translateY(y):定义 2D 转换,沿着 Y 轴移动元素;以及ease-in-out:动画以低速开始和结束。
1.html
<div id="container"> <div class="demobox"> <div class="demo"></div> </div> <div class="demobox"> <div class="demo"></div> </div> </div>
把demobox的p做向右的匀速的运动,里面demo的p做上下的变速的运动。
2.css
#container { height:110px; font-size:0; width:140px; } .demobox { float:right; width:5px; height:5px; animation:myfirst1 linear 5s infinite; -webkit-animation:myfirst1 linear 5s infinite; } .demo { width:6px; height:6px; border-radius:3px; background:#90e4e9; animation:myfirst2 ease-in-out 1s infinite alternate; -webkit-animation:myfirst2 ease-in-out 1s infinite alternate; /*Safari and Chrome */ } .demobox:nth-of-type(1) .demo:nth-of-type(1){ animation-delay:0s; } .demobox:nth-of-type(2) .demo:nth-of-type(1){ animation-delay:0.03s; } @keyframes myfirst1 { from { transform:translateX(0px); -webkit-transform:translateX(0px); } to { transform:translateX(1000px); -webkit-transform:translateX(1000px); } } @-webkit-keyframes myfirst1 /* Safari and Chrome */ { from { transform:translateX(0px); -webkit-transform:translateX(0px); } to { transform:translateX(1000px); -webkit-transform:translateX(1000px); } } @keyframes myfirst2 { 0% { transform:translateY(0px); -webkit-transform:translateY(0px); } 50% { transform:translateY(100px); -webkit-transform:translateY(100px); } 100% { transform:translateY(0px); -webkit-transform:translateY(0px); } } @-webkit-keyframes myfirst2 /* Safari and Chrome */ { 0% { transform:translateY(0px); -webkit-transform:translateY(0px); } 50% { transform:translateY(100px); -webkit-transform:translateY(100px); } 100% { transform:translateY(0px); -webkit-transform:translateY(0px); } }
ok,一个正余弦曲线出来啦 @^-^@