How to animate using css3

Question

I just want to animate the menu items using css. I have applied animation but its not working. Any sort of animation will be ok. I am new to css. Can anybody help me out please.

Here is the JS fiddle what I am upto now: Demo

here is the 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 is the 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%);
}

Where I am going wrong. Please let me know.

Answer 1

I updated your fiddle to make the drop-down menus fade in and out on a loop. It's not the fanciest example, but it should help you get the idea.

You were simply missing the actual keyframe animation, and then missing the reference to that animation name. Pretty straight forward and should give you an idea on how you can expand upon it for animating other elements and their properties. Don't forget to add in all the 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;    

}

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

If you want to learn more about CSS keyframe animations check out this great article on CSS tricks.

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