JavaScript需要比CSS更多的处理能力吗？

Question

我有一个a question on stackoverflow，我得到了多个答案来设置字体真棒的动画（被认为是普通文字），第一个就是：

$(document).ready(function(){
    $("#plane-icon").click(function(){
        $(this).animate({
            left:'180px',
            top:'-20px',
            fontSize:'20px'
        },2000);
        $(this).animate({
            left:'0px',
            top:'180px',
            fontSize:'100px'
        },0);
        $(this).animate({
            left:'0px',
            top:'80px',
        },1000);
    });
});

.icon-wrap {
    width:180px;
    height:180px;
    font-size:100px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}

#plane-icon {
    position:absolute;
    top:80px;
    left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
    <span id="plane-icon"></span>
</div>

第二个答案，结果相同，是：

$(document).ready(function(){
    $('body').on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
        function(){
            $('#plane-icon').removeClass('launched');
        }
    );
    $('#plane-icon').click(function(){
        $(this).addClass('launched');
    });
});
.icon-wrap {
    width:180px;
    height:180px;
    font-size:100px;
    overflow:hidden;
}

#plane-icon {
    display:block;
    cursor:pointer;
    transform:translate(0px,80px) scale(1);
}

#plane-icon.launched {
    animation-name:rocket;
    animation-duration:3s;
    cursor:default;
}


@keyframes rocket {
    0% {
        transform:translate(0px,80px) scale(1);
    }
    66% {
        transform:translate(120px,-80px) scale(0.1);
    }
    67% {
        transform:translate(120px,180px) scale(0.1);
    }
    68% {
        transform:translate(0px,180px) scale(1);
     }
     100% {
         transform:translate(0px,80px) scale(1);
     }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
    <span id="plane-icon"></span>
</div>

这两个中的哪一个需要较少的处理能力？