css沿曲线进行动画,css3动画曲线运动

Title

.box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px}

.box2{width: 50px;height: 120px;background: black;}

.box{ animation: top1 1s ease-out forwards}

.box2{ animation: right1 1s ease-in forwards ;}

@keyframes top1 {

0%{transform: translateY(0px) ;}

100%{transform: translateY( -200px) ;}

}

@keyframes right1 {

0%{transform: translateX(0px) rotate(0deg);}

100%{transform: translateX(200px) rotate(90deg);}

}

第一种写法通过两个盒子执行不同动画，第二种通过一个盒子执行两个动画。

Title

.box{

text-align: center;

width: 50px;

height: 80px;

border-radius: 10px;

background: black;

position: absolute;

animation:bimg1 2s ease-out forwards,bimg2 2s ease-in forwards;

/*ease-out ,和ease-in 顺序不能反*/

}

.main{width: 30px;height: 10px;background: whitesmoke;margin: 85% auto;border-radius: 2px}

@keyframes bimg1 {

0% {top: 0;transform: rotate(0deg)}

100% {top: 200px;transform: rotate(-90deg)}

}

@keyframes bimg2 {

0% {left: 0;}

100% {left: 400px;}

}

来源：https://www.cnblogs.com/xiaobaibubai/p/7060189.html