小编dck*_*dck的帖子

我需要8种不同的CSS3动画,这些动画太相似了,所以我使用了LESS.下面是代码,它完美地运行,带有一个小故障 - @name变量.

.animation_top (@name, @pxFrom, @pxTo) {
    @-moz-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-webkit-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }

    @-ms-keyframes @name {
        0% {
            top: @pxFrom;
            opacity: 0;
        }
        100% {
            top: @pxTo;
            opacity: 1;
        }
    }
}

因为css关键帧是由@符号启动的,所以LESS只是忽略@name的变量.有没有办法如何逃脱关键帧@符号或迫使LESS以某种方式正确渲染@name？