Animation und Transition

by Jens Grochtdreis

HTML

<ul class="anim-trans">
    <li id="nr1">
        <a href="#">Was ein genialer Linktext!</a>
    </li>
    <li id="nr2">
        <a href="#">Hier wird es sogar besser!</a>
    </li>
    <li id="nr3">
        <a href="#">Besser geht es definitiv nicht!</a>
    </li>
</ul>

CSS

.anim-trans {
        background-color: #dadada;
        width: 280px;
        padding: 0 0 0 20px;        
        }

    .anim-trans li {
        display: block;
        list-style: none;
        margin-bottom: 10px;
    }
    .anim-trans li a {
        font-family: Verdana, sans-serif;
        border: none;
        display: block;
        font-size: 16px;
        height: 63px;
        left: -19px;
        line-height: 18px;
        padding: 0 20px;
        position: relative;
        text-decoration: none;
        text-shadow: rgba(0,0,0, 0) 1px 1px 2px;
        width: 220px;

        -webkit-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
        -moz-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
        -o-box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
        box-shadow: rgba(0,0,0, 0) 2px 2px 2px;
        
        border-radius: 0 31px 31px 0;

        -webkit-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -webkit-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
           -moz-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -moz-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
              -o-transition: background-color .25s ease, color .5s ease, width .2s ease-out, -o-box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
                transition: background-color .25s ease, color .5s ease, width .2s ease-out, box-shadow .25s ease, text-shadow .2s ease, opacity .2s ease;
    }
    .anim-trans li a {
        color: #000;
        padding-top: 14px;
    }
    .anim-trans li a:hover,
    .anim-trans li a:focus {
        color: #fff;
        text-shadow: rgba(0,0,0, .82) 1px 1px 1px;
        width: 251px;

         -webkit-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
            -moz-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
              -o-box-shadow: rgba(0,0,0, .42) 2px 2px 2px;
                 box-shadow: rgba(0,0,0, .42) 2px 2px 2px;

         -webkit-transition: background-color...