html5 - How to animate using css3 -
i want animate menu items using css. have applied animation not working. sort of animation ok. new css. can me out please.
here js fiddle upto now: demo
here html part..
<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> and here 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 { 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: 0.5s ease; -moz-transition: 0.5s ease; -o-transition: 0.5s ease; -ms-transition: 0.5s ease; transition: 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%); } where going wrong. please let me know.
i updated fiddle make drop-down menus fade in , out on loop. it's not fanciest example, should idea.
you missing actual keyframe animation, , missing reference animation name. pretty straight forward , should give idea on how can expand upon animating other elements , properties. don't forget add in appropriate vendor prefixes!
@-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; } if want learn more css keyframe animations check out great article on css tricks.
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
Comments
Post a Comment