之前想做一个div在原地倾斜后,以同样的倾斜度再向前移动100px的动画,但是我是这么写的,这样写的问题在于translate会会基于原本的倾斜角度前进,而不是在水平方向上移动
0% {
transform: rotate(0deg) translate(0,0);
}
25%{
left: 0;
transform: rotate(20deg) translate(0,0);
background-color:darkseagreen;
}
35%{
transform: rotate(15deg) translate(250px,0);
}
所以应该改成用letf来控制移动距离,div需要设置position absolute/relative
0% {
left: 0;
transform: rotate(0deg);
/* transform: translate(0,0); */
}
25%{
left: 0;
transform: rotate(20deg);
background-color:darkseagreen;
}
35%{
transform: rotate(0deg);
left: 500px;
background-color:deepskyblue;
}
关于@keyframes百分比的用法
- 之前参照网站里的某个动画是div在快速向前移动后在终点停下来改变颜色,过了一会又快速的翻转360deg返回初始位置,这不是一个线性的运动,之前还想的是是不是用了animation的timing-function,结果查看源代码发现是这样写的
55%{
transform: rotate(0deg);
left: 500px; //--------------------
background-color:deepskyblue;
} ==》这里都用的是left:500px;所以给人一种
div在终点停留的感觉
70%{
left: 500px; //--------------------
transform: rotate(0deg);
background-color: thistle
}
100% {
left: 0; //----------------------- ==》这里因为上一部分和这一部分只相差30%
transform: rotate(-360deg); 所以会给人以一种快速翻转回原点的效果
background-color: skyblue;
}
所以在终点停留和快速返回 都是利用了百分比来实现的。