如何使用css3製作動畫

Question

我只想使用css爲菜單項設置動畫效果。我已經應用了動畫，但沒有奏效。任何類型的動畫都可以。我對css很陌生。請有人幫助我。

這裏是JS撥弄我現在高達什麼： Demo

這裏是HTML部分..

<div id="back"> 

      <div class="wrapper"> 
    <div class="container"> 
    <ul id="menu" class="menu"> 

    <li id="l1" runat="server" class="active"><a class="link1" href="Home.aspx" runat="server" id="a1">Home</a></li> 
    <li id="l2" runat="server"><a runat="server" class="link1" href="?id=History" id="a2">About MCB<img src="Images/Other%20Images/dropdown.png" style="position:absolute;margin-right:0px; top: -3px; left: 138px;"/></a> 
     <ul> 
      <li id="l21" runat="server"><a runat="server" class="link1" href="?id=Members" id="a21">Member details</a></li> 
      <li id="l22" runat="server"><a runat="server" class="link1" style="width:116px;" href="?id=History" id="a22">History</a></li> 
     </ul> 

    </li> 
    <li id="l3" runat="server"><a runat="server" href="?id=Photos" class="link1" id="a3">Gallery<img src="Images/Other%20Images/dropdown.png" style="position:absolute;top: -3px; float:right;right:-8px; z-index:1000;"/></a> 
     <ul id="gl"> 
      <li id="L31" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Photos" id="a15">Photos</a></li> 
      <li id="L32" runat="server"><a style="width:inherit" runat="server" class="link1" href="?id=Videos" id="a16">Videos</a></li> 
     </ul> 

    </li> 
    </ul> 
</div> 
</div> 
</div> 

這裏是CSS：

.wrapper { 
    width: 100%; 
    height: 40px; 
    background : #464646; 
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); 
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); 
    border-top: 2px ridge #939393; 
    position: relative; 
    top:19px; 
    margin-bottom: 30px; 
} 

ul { 
    margin: 0; 
    padding: 0; 
} 

ul.menu { 
    height: 30px; 
    border-left: 1px solid rgba(0,0,0,0.3); 
    border-right: 1px solid rgba(255,255,255,0.3); 
    float:left; 
    position:relative; 
} 

ul.menu li { 
    list-style: none; 
    float:left; 
    height: 39px; 
    display:inline-block; 
    text-align: center; 
    position:relative; 
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1))); 
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 

} 

    ul.menu li ul li 
    { 
     display: block; 
     float: none; 
     clear: left; 
     animation-duration:5s; 
     animation-fill-mode:both; 
     animation-play-state:paused; 
     animation-direction:alternate; 
     animation:ease-in-out;  

    } 
    .menu li:not(:hover) ul { 
    display: none; 

    } 

    .menu li:hover ul { 
    display: inline-block; 

    } 

ul.menu li ul li a 
{ 
     clear: left; 
     line-break: strict; 
     display:inline-block; 
     position:relative; 
     font-size:18px; 

    } 
.link1 { 
     display: block; 

     text-decoration: none; 
     font-family:'Adobe Garamond Pro'; 
     color: White; 
     font-size: 22px; 
     font-weight:bolder; 

     padding: 0 30px; 
     border-left: 1px solid rgba(255,255,255,0.1); 
     border-right: 1px solid rgba(0,0,0,0.1); 
     text-align: center; 
     line-height: 39px; 

     background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); 
     background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); 
     -webkit-transition-property: background; 

     -moz-transition-property: background; 

     transition-property:background; 

     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     -ms-transition: all 0.5s ease; 
      transition: all 0.5s ease; 
} 

.link1:hover { 
    background: transparent none; 
} 

ul li.active .link1{ 
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1))); 
    color:black; 
    background:-o-linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 
    background:linear-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); 
} 

我在哪裏我錯了。請告訴我。

Answer 1

我更新了你的小提琴，讓下拉菜單在循環中淡入淡出。這不是最好的例子，但它應該有助於你理解。

您只是錯過了實際的關鍵幀動畫，然後錯過了對該動畫名稱的引用。非常簡單，並且應該給你一個關於如何擴展其他元素及其屬性的動畫的想法。不要忘記添加所有適當的供應商前綴！

@-webkit-keyframes fadeInOut { 
    0% { opacity: 1; } 
    50% { opacity: .25; } 
    100% {opacity: 1; } 
} 

ul.menu li ul li 
{ 
    display: block; 
    float: none; 
    clear: left; 
    -webkit-animation-name: fadeInOut; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 3s;  

} 

http://jsfiddle.net/gUmZw/5/

如果您想了解更多關於CSS動畫關鍵幀，檢查出的CSS技巧這篇大文章。

http://css-tricks.com/snippets/css/keyframe-animation-syntax/