jquery - JQuery の代わりに CSS アニメーションを実行できますか?

Question

この jquery コンストラクトを純粋な CSS3 に置き換えることができるかどうか疑問に思っていますか?

$('#visibleRoutes > ul:nth-of-type(1)').hover(function () {
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(2)').animate({ marginLeft: '30%' },500);
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(3)').animate({ marginLeft: '30%' },500);
                }, function () {
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(2)').animate({ marginLeft: '0' }, 800);
                    $('nav#main-nav > div#visibleRoutes > ul:nth-of-type(3)').animate({ marginLeft: '0' }, 800);
                });

で遊んでみました

#visibleRoutes ul:nth-child(1):hover{
                ul:nth-child(2){
                   margin-left:30%
                     }
            }

明らかにうまくいきませんでした。CSSの専門家の意見はありますか？