可以用CSS动画代替JQuery吗？

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专家意见？