2012-11-19 368 views
0

動畫應該來回擺動。但我不明白爲什麼它不是。這裏是代碼看網站http://codepen.io/anon/pen/tasJE。這是它應該看起來像爲什麼CSS動畫不起作用

CSS

#menu { 
    position: relative; 
    right: 30px; 
    float: right; 
    padding: 0 20px; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15); 
    background: #ccc; 
} 
#menu, #menu ul { 
    list-style: none; 
} 
#menu > li { 
    float: left; 
    position: relative; 
    border-right: 1px solid rgba(0,0,0,.1); 
    box-shadow: 1px 0 0 rgba(255,255,255,.25); 
    perspective: 1000px; 
} 
#menu > li:first-child { 
    border-left: 1px solid rgba(255,255,255,.25); 
    box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25); 
} 
    #menu a { 
    display: block; 
    position: relative; 
    z-index: 10; 
    padding: 13px 20px 13px 20px; 
    text-decoration: none; 
    color: rgba(75,75,75,1); 
    line-height: 1; 
    font-weight: 600; 
    font-size: 12px; 
    letter-spacing: -.05em; 
    background: transparent;  
    text-shadow: 0 1px 1px rgba(255,255,255,.9); 
    transition: all .25s ease-in-out; 
} 
#menu > li:hover > a { 
    background: #333; 
    color: rgba(0,223,252,1); 
    text-shadow: none; 
} 
#menu li ul { 
    position: absolute; 
    left: 0; 
    z-index: 1; 
    width: 71px; 
    padding: 0; 
    opacity: 0; 
    visibility: hidden; 
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px; 
    background: transparent; 
    overflow: hidden; 
    transform-origin: 50% 0%; 
} 
#menu li:hover ul { 
    padding: 0px 0; 
    background: #333; 
    opacity: 1; 
    visibility: visible; 
    box-shadow: 1px 1px 7px rgba(0,0,0,.5); 
    animation-name: swingdown; 
    animation-duration: 1s; 
    animation-timing-function: ease; 
} 
@keyframes swingdown { 
    0% { 
     opacity: .99999; 
     transform: rotateX(90deg); 
    } 
    30% {   
     transform: rotateX(-20deg) rotateY(5deg); 
     animation-timing-function: ease-in-out; 
    } 
    65% { 
     transform: rotateX(20deg) rotateY(-3deg); 
     animation-timing-function: ease-in-out; 
    } 
    100% { 
     transform: rotateX(0); 
     animation-timing-function: ease-in-out; 
    } 
} 
#menu li li a { 
    padding-left: 15px; 
    font-weight: 200; 
    color: #ddd; 
    text-shadow: none; 
    border-top: dotted 1px transparent; 
    border-bottom: dotted 1px transparent; 
    transition: all .15s linear; 
} 

#menu li li a:hover { 
    color: rgba(0,223,252,1); 
    border-top: dotted 1px rgba(255,255,255,.15); 
    border-bottom: dotted 1px rgba(255,255,255,.15); 
    background: rgba(0,223,252,.02); 
} 

HTML

<ul id="menu"> 
    <li><a href="#">More</a> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Facts</a></li> 
      <li><a href="#">Tour</a></li> 
      <li><a href="#">Author</a></li> 
     </ul> 
</ul>​ 

這裏是jfiddle http://jsfiddle.net/jspence29/CVnf4/

+0

那筆爲我工作。它來回擺動。你在嘗試使用哪種瀏覽器? –

+0

你的小提琴缺少前綴。 Codepen使用Lea Verou的['-prefix-free'](http://leaverou.github.com/prefixfree/)。這裏是'-prefix-free'的小提琴:http://jsfiddle.net/CVnf4/1/ –

+0

謝謝! – user1815176

回答

2

這是一個擴展到上述評論。

JSFiddle允許您通過左側面板加載外部JavaScript文件。
這就是我加載-prefix-free的地方。

以下是截圖:

"Manage Resources" tab in JSFiddle

+0

謝謝,我會在我的頁面中鏈接到哪裏? – user1815176

+0

@ user1815176 - 在文檔的頭部。 –