CSS transitions提供了一种在更改CSS属性时控制动画速度的方法详解点这 。
u=3294564858,810299706&fm=27&gp=0.jpg
其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
语法简写：
div { transition: <property> <duration> <timing-function> <delay>; }
transition是一种过渡效果,执行一次。
好了，看完详解，相信您一定会感叹神奇的css，是的，下面我们来说个栗子，感受一下它的魅力。
任务描述
- 如图，实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框。
图片.png
- 在输入框中允许输入如下指令，按下按钮后，使得正方形做相应动作
GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
TUN LEF：向左转（逆时针旋转90度）
TUN RIG：向右转（顺时针旋转90度）
TUN BAC：向右转（旋转180度）
TRA LEF：向屏幕的左侧移动一格，方向不变
TRA TOP：向屏幕的上面移动一格，方向不变
TRA RIG：向屏幕的右侧移动一格，方向不变
TRA BOT：向屏幕的下面移动一格，方向不变
MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格 - 每个指令的执行时间是1s（可以自己调整）
GO和TUN LEF为例
在没用transition的情况下，单纯用原生js实现，查看全部代码。
思路
GO：用定时器来实现1秒动画。假设每个格子是50px大小，1秒内移动50px那么可以每隔10ms移动0.5px，循环100次。代码如下：
for (var i = 1; i < const_movetimes + 1; i++) {
var x = (function(index) {
return function() {
obj.style.left = (left - index * 50 / const_movetimes) <= 0 ? 0 : (left - index * 50 / const_movetimes) + 'px';
if (index === const_movetimes)
clearTimeout(t);
}
})(i);
var t = setTimeout(x, 1000 / const_movetimes * i);
}
TUN LEF:用定时器来实现1秒动画。旋转deg，若仍执行100次，那么每次转动deg/100。代码如下：
for (var i = 1; i < 101; i++) {
var y = (function(index) {
return function() {
box.style.transform = 'rotate(' + (changdeg + deg / 100 * index) % 360 + 'deg)';
if (index === 100) {
clearTimeout(t);
}
}
})(i)
var t = setTimeout(y, 6 * i);
}
存在问题：
以上的实现没有对多次点击做处理，因此在当前动画还没结束时，若又点击执行按钮后，会出现问题，动画不会移动到正确位置。
使用transition查看全部代码
在css样式表中添加：
transition: all 1s;
那么在js中简单一行代码就可完成。
//go
obj.style.left = (left - 50) <= 0 ? 0 : (left - 50) + 'px';
//roate
box.style.transform = 'rotate(' + (changdeg + deg) % 360 + 'deg)';
重点来了，使用transition后发现，原先的问题不存在了。自动处理动画队列，多次点击执行按钮，也会准确执行。
由此可见省了不少代码，css3不可小觑。
