ul { list-style:none margin:0 padding:0 text-align:center background:#F03 color:#FFF -webkit-transform:scaleY(0) -webkit-transform-origin:0 0 }
li { padding:0 margin:0 }
div { width:200px }
div:hover ul { -webkit-animation:ulShow 0.4s -webkit-animation-fill-mode:forwards -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1) }
div div { height:30px line-height:30px text-align:center background-color:#FC0 }
@-webkit-keyframes ulShow {
from { -webkit-transform:scaleY(0) }
to { -webkit-transform:scaleY(1) }
} <!-- HTML部分 -->
<div>
<div>下拉 </div>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</div>
本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-
”，IE系列比较复杂在此不予举例详情请查询W3C。
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。
