Html5 de Animiasyon 2

@-webkit-keyframes yerdegistir
    {
        0%
        {
             margin-left:0;
             margin-top:0;
        }
        25%
        {
            margin-left:400px;
            margin-top:0;
        }
        50%
        {
            margin-left:400px;
            margin-top:400px;
        }
        75%
        {
              margin-left:0;
              margin-top:400px;
        }
        100%
        {
            margin-left:0;
            margin-top:0;
        }

    }
    div
    {
        width:400px;
        height:100px;
        background-color:fuchsia;
    }
    div:hover{
        -webkit-animation:yerdegistir 3s;
    }



///Burada ÖNEMLİ NOKTA   OLAYIN %25, %50 lililk dilmlerde ne yapacagı diye parcalanması önemli