css同步不同的动画

Question

最近我使用jQuery创建了这个动画： https://jsfiddle.net/Sempervivum/jhsmumxt/1/ （悬停TITLE1或TITLE2）

var w = Math.floor($("#wrapper").width()) - 10;
    $("#innerleft").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
});
$("#innerright").mouseenter(function(){
    $("#left").animate({width: Math.floor(w * 0.25) + "px"}, 2000);
    $("#right").animate({width: Math.floor(w * 0.75) + "px"}, 2000);
});

但是我的客户提供商不允许使用javascript，因此我必须切换到CSS动画。创建一个单独的没问题但是在这里我需要同时启动两个不同的动画：悬停#innerleft用不同的参数开始#left和#right的动画，反之亦然。使用纯CSS时这可能吗？