②：在比较复杂的动画，css3rotate需要通过控制多张图片，此时的代码量会很大，而是用gif图的话则不需要过多的代码；
③：在兼容性方面：css3只有高级版本的浏览器才兼容，而gif几乎所有浏览器都能够兼容。
您好，您的问题实现起来并不复杂。我说一下思路吧。1）按钮问题：例如小灯，你要准备两套图片，一套灰色的灯代表关闭，另一套黄色的灯代表打开。当点击小灯后，利用JS代码把灰灯图片替换成黄灯图片。OFF和ON按钮处理方法相同。当然，要先点击ON后小灯才能被点亮，这与现实生活中的风扇一样，OFF时小灯是不能被点亮的。
2）风扇旋转问题：CSS3有新功能：object.style.transform="rotate(10deg)" ，表示将这个元素旋转10度。要让风扇转起来，你要做两件事：1是准备一张风扇的图片；2当按下ON按钮后启动定时器SetInterva，每隔一定时间就用上述旋转命令转动风扇图片。时间越短转得越快。当选择不同的速度时，修改不同的的定时器定时参数。比如1档时间为100毫秒（旋转最快），2档200毫秒，3档300毫秒（旋转最慢）。具体数值要看最终效果而定。
希望有用。
transition-timing-function。和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。
注意：transition是为页面元素设置某个需要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。我们常常在制作类似按钮鼠标经过和移出效果时使用transition。
通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在日常开发中transition的使用频率更高一些，我们往往只有在遇到transition无法解决的问题时，才会转而使用animation。
