<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transtition</title> <style> .zero{ height:100px; width:100px; background-color:white; transition: background-color 0.5s ease-in 0s; float:left; margin-left:10px; } .zero:hover{ background-color:gray; } </style> </head> <body> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> <div class=‘zero‘></div> </body> </html>
这时比较简单的过度可以实现一些简单的类似动画的效果，实现过渡一定要具备四个要素：
1.指定过渡属性，如background、color等
2.指定过渡所需时间
3.指定过渡函数，即过渡的速度、方式等
4.指定过渡延迟时间，表示开始执行的时间
这样就可以实现过渡由于是符合元素可以直接这样写transition: <property> <duration> <timing-function> <delay>。
原文：http://www.cnblogs.com/xiao-song/p/5666429.html