CSS3transition实现的简单动画菜单

转自：http://www.rainweb.cn/article/css3-transition-menu-a.html

transition是css3中新添加的特性，在W3C标准中是这样描述 的：“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。

在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。

查看demo

主要就是设置图片的属性left 从0过度到300，透明度从0变到1：

.mh-menu li img{  
    position: absolute;  
    z-index: 1;  
    left: 0px;  
    top: 0px;  
    opacity: 0;  
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;  
}  
.mh-menu li:hover img{  
    left: 300px;  
    opacity: 1;  
} 

demo仔细看了一下，没有特别复杂，主要就是先把各个元素定位好，然后再设置透明度和动画的方向，关键是理解transition的属性