css:
.item {
width:50px;
height: 50px;
background-color: red;
animation:hMove1sease-in0s1;
position: absolute;
}
.wraper {
animation:verMove1slinear0s1;
position: absolute;
}
@keyframesverMove {
from{
left:0px
}
to{
left:400px
}
}
@keyframeshMove {
from{
top:0
}
to{
top:500px
}
}
html:
总结:两个元素,父元素控制横向匀速移动,子元素控制纵向加速移动,最后会成为抛物线
对animation的理解:
animation上中定义的动画相对于当前元素中原有的css属性来运行的。