如何使@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);
        });