学习CSS3之animation所遇到的坑

• 关于translate和left用于描述位置

之前想做一个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;
    }

所以在终点停留和快速返回 都是利用了百分比来实现的。