如何使@keyframes里面的属性值为动态添加

angular.module('analysis.realtime')
    .controller('userActionController', ['$rootScope','$scope', 'realtimeService', function($rootScope,$scope,realtimeService) {
        var mpId = $rootScope.mpId;
        var count = 1;
        $scope.headerInfo = {
            title: '实时用户行为',
            tip: '上一个 5min 区间内, 用户访问网站不同的页面情况'
        };
        realtimeService.getUserBehavior(mpId).then(function(json) {
            $scope.data = json;
            var jsonLength = json.length;
            var topLength = -jsonLength*40+40;
            var liLength=-jsonLength*40;
            $scope.textStyle={
            	'top':liLength+'px',
                'font-size': '12px',
    		'font-family': '微软雅黑',    
    		'padding': '10px',
    		'position': 'relative',
            	'animation': 'slide 1000s linear infinite',
            	'height':'40px'
            };
           var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ @-webkit-keyframes slide{\ 0% {\ top: '+topLength+'px;\ }\ 100% {\ top: 40px;\ }\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('head')[0].appendChild(style);
        });