css3을 사용하여 애니메이션하는 방법

Question

CSS를 사용하여 메뉴 항목에 애니메이션을 적용하고 싶습니다. 애니메이션을 적용했지만 작동하지 않습니다. 어떤 종류의 애니메이션이라도 괜찮습니다. 나는 CSS를 처음 사용합니다. 아무도 나를 도와주세요. ..

<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> 

여기 Demo

는 HTML의 일부이며 여기에 CSS는 다음과 같습니다 : 여기

는 내가 지금 개까지 오전 JS 바이올린입니다

.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%); 
} 

I 잘못 가고있다. 저에게 알려주세요.

Answer 1

필자는 피들을 업데이트하여 루프에서 드롭 다운 메뉴를 페이드 인 및 페이드 아웃했습니다. 가장 좋은 예는 아니지만 아이디어를 얻는 데 도움이 될 것입니다.

실제 키 프레임 애니메이션이 누락 된 상태에서 해당 애니메이션 이름에 대한 참조가 누락되었습니다. 아주 솔직하고 다른 요소와 속성에 애니메이션을 적용하는 방법에 대한 아이디어를 제공해야합니다. 모든 적절한 공급 업체 접두사를 추가하는 것을 잊지 마십시오!

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

당신이 CSS 키 프레임 애니메이션에 대한 자세한 내용을 원한다면

@-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;  

} 

는 CSS 트릭에이 위대한 기사를 확인하십시오.

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