/* 经常发现很多相同的属性写了很多遍，只是前叙不同，这是为了兼容更多浏览器的用法，前叙都是这些浏览器专用的私有属性
-webkit- webkit类浏览器专用，苹果浏览器，谷歌浏览器
-moz- moz类浏览器专用，火狐浏览器
-ms- IE类浏览器专用，IE浏览器
-o- webkit类浏览器专用，opera浏览器 */
.menuHolder ul ul {
/* transform-origin:x y 设置旋转元素的基点位置(通俗就是从x y z坐标为起点，一般会跟住旋转rotate一并使用) 这个是2D旋转x y，3D旋转则是x y z */
-webkit-transform-origin: 0 0
-moz-transform-origin: 0 0
-ms-transform-origin: 0 0
-o-transform-origin: 0 0
transform-origin: 0 0
/* transform:rotate() 设置旋转元素旋转的角度单位是deg，看成度即可比如旋转45度就是transform:rotate(45deg) */
-webkit-transform: rotate(90deg)
-moz-transform: rotateZ(90deg)
-ms-transform: rotate(90deg)
-o-transform: rotate(90deg)
transform: rotate(90deg)
/* transition: property duration timing-function delay
transition设置元素动画效果
property默认是all，对所有元素起作用；
duration规定完成过渡效果需要多少秒或毫秒，默认0，也就是默认不过渡；
timing-function规定速度效果的速度曲线，如ease-in-out先快后慢
delay动画延迟多长时间才开始，单位秒或毫秒 */
-webkit-transition: 1s
-moz-transition: 1s
-ms-transition: 1s
-o-transition: 1s
transition: 1s
}
.menuHolder li.s2:nth-of-type(3) > a {
/* background，设置元素背景，#bbb为颜色值，此处设置是背景色为#bbb（浅灰色） */
background: #bbb
-webkit-transform: rotate(30deg)
-moz-transform: rotateZ(30deg)
-ms-transform: rotate(30deg)
-o-transform: rotate(30deg)
transform: rotate(30deg)
}
.menuHolder .a6 li:nth-of-type(6) > a {
background: #444
-webkit-transform: rotate(75deg)
-moz-transform: rotateZ(75deg)
-ms-transform: rotate(75deg)
-o-transform: rotate(75deg)
transform: rotate(75deg)
}
.menuHolder li.s1:hover ul.p2 {
-webkit-transform: rotate(0deg)
-moz-transform: rotateZ(0deg)
-ms-transform: rotate(0deg)
-o-transform: rotate(0deg)
transform: rotate(0deg)
}
.menuWindow {
/* 在此元素内的所有元素无论多大也不会溢出，超过的部分会被隐藏 */
overflow: hidden
/* 此元素受绝对定位影响，通过x y坐标来定位，如left ，top ，right ，bottom（只能同时使用left/right top或left/right bottom） */
position: absolute
left: 0
top: 0
/* 元素层块的先后，数字越大的显示越前，如有一个z-index：99的层块，一个z-index：100的层块，100层会覆盖99层 */
z-index: 100
-webkit-transition: 0s 1s
-moz-transition: 0s 1s
-ms-transition: 0s 1s
-o-transition: 0s 1s
transition: 0s 1s
}
.menuHolder:hover .menuWindow {
-webkit-transition: 0s 0s
-moz-transition: 0s 0s
-ms-transition: 0s 0s
-o-transition: 0s 0s
transition: 0s 0s
}
.menuHolder span {
-webkit-transform: rotate(5deg)
-moz-transform: rotateZ(5deg)
-ms-transform: rotate(5deg)
-o-transform: rotate(5deg)
transform: rotate(5deg)
}
</style>
语法:animation-direction: normal|alternate
normal默认值。动画应该正常播放。
alternate动画应该轮流反向播放。
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。
默认值：normal
继承性：no
版本：CSS3
JavaScript 语法：
object.style.animationDirection="alternate"
