基于半径位置的CSS动画

Question

我试图以“Explosion”方式为下图所示的圆圈设置动画效果，以便将当前位置留在视口之外。

问题是，我需要它们从当前位置移动到一个线性位置，以便它们在“爆炸”时隐藏起来。

这些圆圈是使用基于半径和计数的jQuery生成的，我可以使用下面的for循环捕获它们：

function explodeFields() {
    var fields = $('.field');
    fields.each(function() {
        self = $(this);
        console.log(self.attr('id'));
    });
}

我需要所有字段根据其当前位置移动到视口。因此，标记为“1”的字段应该水平移动到屏幕的右侧，而上部圆圈中的字段“13”应该在“爆炸”时向上略微向右移动。

感谢您的帮助！ 感谢。

修改

我正在使用一个名为movejs的库，它有助于css转换等...我希望只有在可能的情况下使用CSS才能做到这一点。 这是DOM中元素的样子：

<div id="field-inner2" class="field field-inner" style="left: 357px; top: 320px;">2</div>

编辑2

这是JS：

 function distributeFields(radius, name) {
        var radius = radius;
        var fields = $('.field-'+ name), container = $('#container'),
            width = container.width(), height = container.height(),
            angle = 0, step = (2*Math.PI) / fields.length;
        fields.each(function() {
            var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
            var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
            if(window.console) {
                console.log($(this).text(), x, y);
            }
            $(this).css({
                left: x + 'px',
                top: y + 'px',
                '-o-transform': 'rotate(' + angle + 'deg)',
                '-moz-transform': 'rotate(' + angle + 'deg)',
                '-webkit-transform': 'rotate(' + angle + 'deg)',
                'transform': 'rotate(' + angle + 'deg)'
            });
            angle += step;
        });        
    }

    function explodeFields() {
        var fields = $('.field');
        fields.each(function() {
            self = $(this);
            $(self).addClass('move');
        });
    }

CSS：

#container { 
    width: 600px; 
    height: 600px; 
    border: 1px solid #000; 
    position: relative; 
}

#center { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    left: 250px; 
    top: 250px; 
    background: #000;
    @include border-radius(50%);
}

.field { 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    background: #f00; 
    @include border-radius(50%);
    @include transform(translateX(50px));
}

.move {
    @include animation-name(move);
    @include animation-duration(3s);
}

@include keyframes(move) {
    0% {
        @include transform(translateX(50px));
    }
    100% {
        @include transform(translateX(200px));
    }
}