2019-04-24 CSS 抛物线

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属性来运行的。